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 v3.4. It is responsive.

Button Widget

Author Komal Jain

Tailwind v3.4 3k 3

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.

Komal Jain

2 years ago

2.7k
Floating Call Widget
Floating Call Widget - Pure CSS + HTML + JS

Sayista Yazdani

2 weeks ago

56
Simple Btn

Abid Ullah

2 years ago

3k
Boutons iOS 26
Boutons iOS 26

Omer fils ELENGA

11 months ago

823
Call to action buttons
Pair of active primary and secondary buttons. Elevated buttons w/ border bottom

Hyun-woo Cho

3 years ago

10.5k
Github star button

Simon Scheffer

3 years ago

11.6k
Buttons with border bottom

Prashant

4 years ago

13.8k
Sign in with GitHub Button

Conan Hilton

4 years ago

17.3k
Settings Button

Arya

4 years ago

11.6k
Animated Gradient Button Component
Button component with smooth hover effects and glass-morphism design. Features expanding gradient animation, rotating icon, and responsive layout. Perfect for call-to-action buttons, landing pages, and web applications. Easy copy-paste Tailwind CSS code ready for integration.

Homayoun

1 year ago

1.3k
Canlı Yayın Butonu
Pulse efekt içeren canlı yayın butonu.

Sedat Kumcu

1 year ago

2.5k
Google login/signup button
Styled button designed for users to log in or authenticate using their Google account. The button features a Google logo (represented by an SVG image) on the left and the text "Login with Google" on the right.

Shakti

3 years ago

41.7k