Home
Komal Jain
Exapnd and collapse button for large content without javascript

Exapnd and collapse button for large content without javascript

Forked from> @komal-j/exapnd-and-collaps-button-for-large-content

Truncate and expand on click large content without using JavaScript.

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

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">

<input type="checkbox" id="toggle-description" class="hidden">
        <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>
        <label for="toggle-description" id="toggle-btn" class="mt-2 text-blue-600 rounded-lg hover:text-blue-700 focus:outline-none cursor-pointer">
        </label>
    </div>
</div>

Related Examples

Exapnd and collapse button for large content
Truncate and expand on click large content with javascript. uses line clamp.

Author:
Komal Jain

7 months ago

1.4k
Glowing gradient button
Button on black background

Author:
Md. Abu Taher

1 year ago

10.7k
Continue with Google button
Login with google button for social login.

Author:
S. Patel

1 year ago

22k
Elevated buttons

Author:
Leon Bachmann

2 years ago

13k
Floating pus button

Author:
Jaffar Hussain

6 months ago

906
Payment Button

Author:
Md. Tofayel islam

11 months ago

2k
Sign in with facebook button

Author:
Conan Hilton

2 years ago

10.2k
Sticky fullpage pages / slides

Author:
Hasan AlDoy (McDoy)

1 month ago

443
Button group
nice and simple buttons with a hover effect

Author:
Sophia Baker

2 years ago

7.1k
Animated Button
on hover show icon

Author:
Lautaro Gómez

6 months ago

1.2k
Interactive Toggle Switch with Smooth Animation
A stylish toggle switch component built with Tailwind CSS and enhanced with minimal JavaScript. This toggle switch features smooth color transitions, dynamic text ("ON/OFF"), and a moving indicator ball, providing a visually appealing and functional design. Ideal for modern web interfaces where toggling functionality is required. Easily customizable for various use cases.

Author:
SHARIFUL ISLAM

2 weeks ago

219
Tilted button on hover.
A simple button with a gradient and tilt on hover. Dark mode supported with same color.

Author:
András Szehofner

3 weeks ago

101

Explore components by Tags

Didn't find component you were looking for?

Search from 2000+ components