Home
Komal Jain
Exapnd and collapse button for large content

Exapnd and collapse button for large content

Truncate and expand on click large content with javascript.
uses line clamp.

This tailwind example is contributed by Komal Jain, on 17-Jul-2024. Component is made with Tailwind CSS v3. It is responsive.

Button Widget

Author Komal Jain

2.5k

Fork Fullscreen

<div class="max-w-md mx-auto bg-white border rounded-lg overflow-hidden mt-12">
    <div class="p-4">
        <h2 class="text-xl font-bold text-gray-900">Luxurious Car Seat Cover</h2>
        <img src="https://images.unsplash.com/photo-1606200639236-00a51094e662?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw3fHxjYXIlMjBzZWF0fGVufDB8MHx8fDE3MjExOTU5NzR8MA&ixlib=rb-4.0.3&q=80&w=1080" alt="Luxurious Car Seat Cover" class="w-full h-48 object-cover my-2 rounded">

<p id="c_description"
            class="mt-2 text-lg text-gray-800 break-words text-medium line-clamp-2 transition-all duration-300 ease-in-out">
            Transform your driving experience with our luxurious car seat cover. Designed with premium quality
            materials,
            this cover provides superior comfort and durability. The breathable fabric ensures maximum airflow, keeping
            you
            cool during long drives. The stylish design enhances the interior of any car, while the easy-to-clean
            surface
            makes maintenance a breeze. Perfect for all seasons, this car seat cover is an essential upgrade for any
            vehicle.
            With a universal fit, it easily installs in minutes. Enjoy the ultimate in driving comfort and style with
            our
            luxurious car seat cover.
        </p>
        <button id="toggle-btn" class="mt-2 text-blue-600 rounded-lg hover:text-blue-700 focus:outline-none">
            Load more
        </button>
    </div>
</div>

if (!description) {
            return;
        }

const toggleBtn = document.getElementById('toggle-btn');
        let isExpanded = false;

// Check if content is overflowing
        if (description.scrollHeight > description.clientHeight) {
            toggleBtn.classList.remove('hidden');
        }

toggleBtn.addEventListener('click', () => {
            isExpanded = !isExpanded;
            if (!isExpanded) {
                description.scrollIntoView({ behavior: 'smooth' });
            }
            description.classList.toggle('line-clamp-2');
            toggleBtn.textContent = isExpanded ? 'Collapse' : 'Load more';
        });
    });
</script>

Related Examples

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

Author:
Komal Jain

1 year ago

2.2k
Download on the App Store light button

Author:
Simon Scheffer

2 years ago

13.1k
Join now button
Attractive button for the CTA section

Author:
Matej Kovač

1 year ago

2.5k
Premium Button Collection with 12 Unique Animations
Collection de 12 boutons premium avec animations uniques : glow, shine, slide, 3D push, neon pulse, glassmorphism, gradient border et plus. Chaque bouton a son propre effet hover. 100% Tailwind CSS, no JavaScript.

Author:
Dolbymat

1 month ago

216
Read more / Show more button with hide button
"hide" button that appears when the additional content is displayed:

Author:
Prajwal Hallale

2 years ago

21.9k
Gradient Button
instagram: ferdiisahin

Author:
Anonymous

1 year ago

1.9k
CTA gradient button

Author:
Anonymous

1 year ago

2.5k
Button group
nice and simple buttons with a hover effect

Author:
Sophia Baker

2 years ago

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

Author:
S. Patel

2 years ago

9.6k
Card-Product
Product card for vertical windows, if you need a more complete version to show more information, you have other options in my profile

Author:
Ameth Galarcio

1 year ago

2.6k
Download on the Mac App Store dark button

Author:
Simon Scheffer

2 years ago

8.2k
Dashboard Stats Widget
Here’s a sleek Stats Widget built with Tailwind CSS that you can sell on TailwindFlex. It includes animated hover effects, trend indicators, and responsive design.

Author:
dev-fab250

7 months ago

1.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components