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

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

15.5k
Sticky fullpage pages / slides

Author:
Laurits

2 years ago

14.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.

Author:
Prashant

2 years ago

14.2k
Music Player

Author:
Abhijit Sen

2 years ago

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

Author:
Freja Jensen

2 years ago

12.4k
WYSIWYG Editor Form
Form with CKEditor

Author:
I.P. Leroy

2 years ago

15.1k
Speedometer Example
Internet speed meter, gauge meter

Author:
Brandon D

2 years ago

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

Author:
Alok

2 years ago

17.7k
Simple count down timer

Author:
Alfredo Pineda Hernández

1 year ago

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

Author:
S. Patel

2 years ago

9k
Play Music - Reproductor
Multimedia music player, with its respective dark mode

Author:
Ameth Galarcio

11 months ago

2k
Code card with copy Button
this example uses clipboard.js to copy the code

Author:
Akmaljon Muhammadjonov

5 months ago

714

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components