Collapsible content

This tailwind example is contributed by Rafferty Kim, on 31-Mar-2023. Component is made with Tailwind v3.4. It is responsive.

Other

Author Rafferty Kim

Tailwind v3.4 14.7k 13

Fork Fullscreen

<div class="max-w-md mx-auto mt-8">
    <ul class="border border-gray-400 rounded-md divide-y divide-gray-400">
        <li>
            <button class="flex items-center justify-between w-full p-4 focus:outline-none" type="button"
                onclick="toggleAccordion(event)">
                <span class="text-lg font-bold">Section 1</span>
                <svg class="w-4 h-4 fill-current" viewBox="0 0 20 20">
                    <path d="M10 13.535l4.95-4.95 1.414 1.414-6.364 6.364-6.364-6.364 1.414-1.414z" />
                </svg>
            </button>
            <div class="accordion-content hidden p-4">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </li>
        <li>
            <button class="flex items-center justify-between w-full p-4 focus:outline-none" type="button"
                onclick="toggleAccordion(event)">
                <span class="text-lg font-bold">Section 2</span>
                <svg class="w-4 h-4 fill-current" viewBox="0 0 20 20">
                    <path d="M10 13.535l4.95-4.95 1.414 1.414-6.364 6.364-6.364-6.364 1.414-1.414z" />
                </svg>
            </button>
            <div class="accordion-content hidden p-4">
                <p>Integer bibendum augue vel urna blandit tristique.</p>
            </div>
        </li>
        <li>
            <button class="flex items-center justify-between w-full p-4 focus:outline-none" type="button"
                onclick="toggleAccordion(event)">
                <span class="text-lg font-bold">Section 3</span>
                <svg class="w-4 h-4 fill-current" viewBox="0 0 20 20">
                    <path d="M10 13.535l4.95-4.95 1.414 1.414-6.364 6.364-6.364-6.364 1.414-1.414z" />
                </svg>
            </button>
            <div class="accordion-content hidden p-4">
                <p>Nullam ut augue auctor, tristique neque quis, euismod velit.</p>
            </div>
        </li>
    </ul>
</div>

Related Examples

Show user details

Lucas Martinez

3 years ago

26.3k
Google map iframe with tailwind

Kofi Osei

3 years ago

22.5k
Typewriter effect
using javascript

Samuel Dawson

3 years ago

43.6k
Question & Answer
questions and answers

Anonymous

3 years ago

9.3k
Invoice template

Shakti

3 years ago

28.8k
background animation
background animation

Anonymous

3 years ago

53.1k
Modern resume template
modern resume template with data

Amit Pachange

3 years ago

23.3k
Glassmorphism form

Sophia Baker

3 years ago

19.4k
Privacy policy page template

Sameer Sultana

3 years ago

19.8k
Date picker
Date picker example using flatpickr library

Lîmåã M

3 years ago

18.2k
Responsive layout with header, main body, aside (sidebar) and footer

Ahmed Malik

3 years ago

13k
Soft-Modern Dark Pricing
A sophisticated, highly rounded pricing component inspired by modern fintech interfaces. It avoids harsh lines in favor of deep "zinc" tones and subtle borders (border-white/5). The center card pops using a high-contrast white button against the dark theme, guiding user focus naturally without using aggressive gradients.

Hamza Atig

10 months ago

785