Home
Prajwal Hallale
Read more / Show more button with hide button

Read more / Show more button with hide button

"hide" button that appears when the additional content is displayed:

This tailwind example is contributed by Prajwal Hallale, on 08-Mar-2023. Component is made with Tailwind CSS v3. It is responsive.

Widget

Author Prajwal Hallale

21.8k

Fork Fullscreen

<div class="max-w-md mx-auto mt-20">
    <h1 class="py-2 font-bold text-xl">Article Heading</h1>
    <p class="leading-relaxed">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non ipsum vel nunc commodo hendrerit sit amet vel
        nisi. Donec sodales maximus justo, nec dictum lectus malesuada non. Sed auctor ultrices tellus non varius.
        <span class="hidden" id="more-text">
            Sed eu enim malesuada, fermentum mi eu, finibus velit. Nam quis blandit velit, vel vehicula neque. Etiam eu lorem suscipit, sollicitudin ante at, pharetra quam.
        </span>
    </p>
    <button id="toggle-btn" class="mt-4 text-blue-500 focus:outline-none">Read More</button>
    <button id="hide-btn" class="hidden mt-4 text-blue-500 focus:outline-none">Hide</button>
</div>

toggleBtnEl.addEventListener('click', () => {
        moreTextEl.classList.toggle('hidden');
        toggleBtnEl.classList.toggle('hidden');
        hideBtnEl.classList.toggle('hidden');
    });

hideBtnEl.addEventListener('click', () => {
        moreTextEl.classList.toggle('hidden');
        toggleBtnEl.classList.toggle('hidden');
        hideBtnEl.classList.toggle('hidden');
    });
</script>

Related Examples

Number counter input

Author:
Prem..

2 years ago

16.1k
Sticky fullpage pages / slides

Author:
Laurits

2 years ago

15.2k
Working back to top button
The "Scroll to top" button becomes visible when the user starts to scroll the page Clicking on that button takes you back to the top of the page. This is a great feature to have on any website especially if your content is long.

Author:
Prashant

3 years ago

14.7k
Music Player

Author:
Abhijit Sen

2 years ago

17k
Working reading progress bar
show how much of the page has been scrolled

Author:
Freja Jensen

2 years ago

12.8k
WYSIWYG Editor Form
Form with CKEditor

Author:
I.P. Leroy

2 years ago

15.6k
Speedometer Example
Internet speed meter, gauge meter

Author:
Brandon D

3 years ago

14k
Simple count down timer

Author:
Alfredo Pineda Hernández

2 years ago

9.5k
Code Block with Copy Button
this example uses clipboard.js to copy the code

Author:
Alok

2 years ago

18.4k
Strong password generator
With following options Password length: Include Uppercase Letters: Include Numbers: Include Symbols:

Author:
S. Patel

2 years ago

9.5k
Exapnd and collapse button for large content
Truncate and expand on click large content with javascript. uses line clamp.

Author:
Komal Jain

1 year ago

2.2k
Dialpad with display text
A simple dialpad fork from @brandon and added display text and changed color

Author:
Jerome Soriano

1 year ago

1.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components