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

22.2k

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

3 years ago

16.7k
Sticky fullpage pages / slides

Author:
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.

Author:
Prashant

4 years ago

15.6k
Music Player

Author:
Abhijit Sen

3 years ago

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

Author:
Freja Jensen

3 years ago

13.4k
WYSIWYG Editor Form
Form with CKEditor

Author:
I.P. Leroy

3 years ago

16.3k
Speedometer Example
Internet speed meter, gauge meter

Author:
Brandon D

4 years ago

15.2k
Simple count down timer

Author:
Alfredo Pineda Hernández

3 years ago

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

Author:
Alok

3 years ago

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

Author:
S. Patel

3 years ago

10.3k
Dash.OS: Drag & Drop Dashboard Widget System
A fully interactive, freeform dashboard builder for the browser. Drop in widgets, drag them anywhere, resize to fit, and your layout is automatically remembered. Ships with a live Chart.js revenue chart, KPI stats, a task tracker, and a notifications feed, all in a single zero-dependency HTML file with dark/light mode built in.

Author:
Ijila Itunu

6 months ago

940
Sticky fullpage pages / slides
Sticky full page

Author:
harinandana

10 months ago

972

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components