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

17.6k

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