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

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
Background Gradient Button with Hover Effects
The button designed with a gradient background that transitions smoothly between three colors

Author:
Kavita Joshi

2 years ago

8.1k
Elevated buttons

Author:
Leon Bachmann

3 years ago

14.6k
Animated Button
on hover show icon

Author:
Lautaro Gómez

1 year ago

2.7k
View More Button

Author:
Amit Pachange

3 years ago

19.6k
Dark mode toggle button
Switch to dark mode without any hassle with this simple JavaScript hack. Sun night button

Author:
Nishant Trivedi

2 years ago

21.6k
buttons group
some attractive button group on different varients primary, outlined and link button

Author:
Akram Khan

1 year ago

1.8k
Color Changing Gradient Button
Color Changing Gradient Button

Author:
EquinoX

1 year ago

3.6k
Sign in with facebook button

Author:
Conan Hilton

3 years ago

11.2k
Button with a gradient border using Tailwind CSS

Author:
Dipti narayan

2 years ago

13k
E-Learning Course Card with Badge and Level Indicator
An HTML and Tailwind CSS component mockup for displaying course information. Features include a placeholder image area with an overlaid certificate badge, a distinct level indicator banner below the image, category text, a course title, key details (like duration and learner count placeholders), and primary/secondary action buttons. Designed for e-learning platforms or course listings.

Author:
Hamza Atig

10 months ago

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

Author:
Freja Jensen

3 years ago

13k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components