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.3k
Glowing gradient button
Button on black background

Author:
Özgür Atmaca

6 months ago

542
Review popup form with toggle and stars
Review popup form with toggle and stars

Author:
Ayman Reifoun

7 months ago

654
Plug and Play Animated Button for Hero Statements / Landing Pages
REMOVE the bg-black from the outside <button/> div, if you are already using a black background. Besides this, the button is plug and play! Know errors: You may need to remove animate-spin for your usecase, depending on framework rendering. For SvelteKit, animate-spin is NOT needed. But the [animation:spin_4s]... is always necessary for a smooth effect. Check out my profile to join my community online or add me on LinkedIn.

Author:
Coastal UI

1 year ago

1.8k
Periodic Table with Tailwind CSS

Author:
Michael Andreuzza

1 year ago

2.6k
Beautiful animated button
on hover effect

Author:
Dika Rahman

1 year ago

4.9k
SCROLL ABAJO
para poner que a llegado al final de la pagina

Author:
Raul antonio de la cruz hernandez

3 months ago

275
Background gradient changing button
Automatic and continuously gradient-changing button. Cyclic color changing button.

Author:
Ingrid Schulz

2 years ago

10.9k
Ripple Button
Ripple Button is an interactive button component with a ripple animation that responds to user clicks

Author:
sachin senal

9 months ago

1.1k
Button With Loader
Tailwind Loader

Author:
Md. Tofayel islam

1 year ago

2.7k
Gradient border button

Author:
Leon Bachmann

3 years ago

16.2k
Gold Premium Button
🪙 Glowing Premium BIP Gold Button in pue Tailwind CSS

Author:
Arnav K

1 year ago

5.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components