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

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
Free Animated Gradient Glow Button with Tailwind CSS
A modern, responsive Tailwind CSS button with glowing gradient hover effects, smooth animations, and an integrated SVG icon. Perfect for landing pages, call-to-action buttons, or any stylish UI project. Fully customizable and open source , ready to copy, paste, and use in your projects.

Author:
Homayoun

2 months ago

132
tradition music
by salvator

Author:
Baraka Salvator

6 months ago

728
future ai robot
this an ai template by salvator

Author:
Baraka Salvator

6 months ago

969
Flame Button

Author:
Carlos Adrian Garcia

1 year ago

2.7k
Get the app section
Play store and App store buttons

Author:
Sophia Baker

2 years ago

9.6k
Applications Showcase
This is a stylish and interactive application showcase component designed for web use. It features the following elements: Background Styling: The main container has a rounded-rectangle shape (rounded-3xl) with a subtle white base overlaying a high-resolution background image, styled with background-size: 600px for an artistic touch. The image itself dynamically serves as a backdrop, giving the component a layered appearance. Main Icon: A small circular icon, located at the top-right corner, appears with smooth hover effects: Enlarges to double its size (scale-[2]). Rotates (rotate-[410deg]). Moves diagonally upwards-right (translate-x-3, -translate-y-3). These transitions occur over a duration of 1 second (transition duration-1000). Overlay Gradient: A transparent gradient overlay (bg-gradient-to-l) adds a polished depth effect, transitioning from black (from-black/80) to lighter shades. App Icon and Info: Icon: The app icon is a smaller, bordered square image (rounded-2xl) with hover shrink animations (group-hover:scale-95). Text: A bold application title (text-md font-semibold) with hover-animated underline effects that gradually expand from left to right. A short app description styled as secondary text. Call-to-Action Button: Below the card is a subtle, rounded button (rounded-full) encouraging interaction. It features: A hover effect with color inversion (gray to black). A lift effect (hover:-translate-y-1) when hovered. This component is perfect for modern app showcases, offering a dynamic, user-friendly visual experience. It ensures a professional look while engaging users through smooth animations and clear calls to action.

Author:
Banshee

11 months ago

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

Author:
Shakti

2 years ago

39.9k
Image Card
An image. Shows title and description info when hovering. Image zooms and darkens when hovering.

Author:
Nick Girga

7 months ago

754
Progress bar with Tailwind CSS and Javascript
How to a create a scroll progress bar with Tailwind CSS and Javascript

Author:
Michael Andreuzza

1 year ago

2.4k
Color changing button
changes the color of a button automatically and continuously

Author:
Anonymous

2 years ago

8.3k
Floating "Go to Top" Button with Tailwind CSS
🚀 Boost your website’s user experience with a sleek floating "Go to Top" button! This easy-to-implement solution uses Tailwind CSS for styling. ✔️ Smooth scroll to top ✔️ Clean and modern design ✔️ Responsive and animated effects Perfect for any website or portfolio! Add it today and make navigation effortless! 🔝💻

Author:
Abdul Baset Bappy

8 months ago

684

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components