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

Button Widget

Author Komal Jain

Tailwind v3.4 2.7k 7

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.

Komal Jain

2 years ago

3k
Linkedin login/signup button

Shakti

3 years ago

13.6k
Google style Button

JUGENDRA GANGWAR

6 days ago

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

Akram Khan

2 years ago

2.5k
Multi-Step Form Wizard
Working Multi-Step Form more complex forms. made with tailwind CSS v3 and javascript

Quentin Rivers

2 years ago

7.7k
Neomorphism button

Akram Khan

2 years ago

3.3k
Engineering Project Dashboard
Track engineering assignments, project progress, technology stack, and delivery timelines in one simple dashboard.

Ayyamperumal S

7 months ago

540
Download on the App Store light button

Simon Scheffer

3 years ago

13.8k
future ai robot
this an ai template by salvator

Baraka Salvator

1 year ago

1.7k
Menu button

Freja Jensen

3 years ago

17k
tooltip Tailwind CSS and Alpinejs

Michael Andreuzza

2 years ago

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

Chitranshu

2 years ago

3.4k