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 v3.4. It is responsive.

Widget

Author Prajwal Hallale

Tailwind v3.4 22.2k 12

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

Prem..

3 years ago

16.8k
Sticky fullpage pages / slides

Laurits

3 years ago

16.6k
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.

Prashant

4 years ago

15.6k
Music Player

Abhijit Sen

3 years ago

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

Freja Jensen

3 years ago

13.4k
WYSIWYG Editor Form
Form with CKEditor

I.P. Leroy

3 years ago

16.3k
Speedometer Example
Internet speed meter, gauge meter

Brandon D

4 years ago

15.2k
Simple count down timer

Alfredo Pineda Hernández

3 years ago

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

Alok

3 years ago

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

S. Patel

3 years ago

10.3k
Sticky fullpage pages / slides

Hasan AlDoy (McDoy)

1 year ago

1.9k
Exapnd and collapse button for large content without javascript
Truncate and expand on click large content without using JavaScript.

Komal Jain

2 years ago

2.7k