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

2.2k

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

1 year ago

2.5k
Underline Hover Effect
Hover effect using after and before pseudo elements.

Author:
Carlos Adrian Garcia

2 years ago

9.4k
Elegant Buttons
Useful Tailwind classes for creating several types of basic buttons.

Author:
Nick Girga

9 months ago

733
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
5 Different Style of Button
Gradient Button outline button neon button Sliding Background pulsing Button

Author:
KULDEEP

7 months ago

408
Previous Next Buttons
Pagination buttons

Author:
Alok

3 years ago

14.3k
Custom Carosel

Author:
Md. Tofayel islam

1 year ago

2.9k
Dialpad with display text
A simple dialpad fork from @brandon and added display text and changed color

Author:
Jerome Soriano

1 year ago

2k
Buttons

Author:
Maxim

1 year ago

1.6k
shadcn Button
button

Author:
Cristian

1 year ago

2.4k
Button
Button When Hover and page Reload then Button text will show the animation

Author:
Chitranshu

1 year ago

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

Author:
Banshee

10 months ago

863

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components