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

20.9k

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.1k
Sticky fullpage pages / slides

Author:
Laurits

1 year ago

14.1k
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

13.9k
Music Player

Author:
Abhijit Sen

2 years ago

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

Author:
Freja Jensen

2 years ago

12k
WYSIWYG Editor Form
Form with CKEditor

Author:
I.P. Leroy

2 years ago

14.6k
Speedometer Example
Internet speed meter, gauge meter

Author:
Brandon D

2 years ago

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

Author:
Alok

1 year ago

17.3k
Simple count down timer

Author:
Alfredo Pineda Hernández

1 year ago

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

Author:
S. Patel

2 years ago

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

Author:
Joost Hietbrink

1 week ago

50
Multi-Step Form Wizard
Working Multi-Step Form more complex forms. made with tailwind CSS v3 and javascript

Author:
Quentin Rivers

5 months ago

3.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components