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.5k 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>