Requires Material Tailwind JS

Tailwind CSS Collapse

Build smooth expanding and collapsing sections using Tailwind CSS transitions. Perfect for creating interactive content areas, mobile menus, and nested navigation that enhance user experience.

Basic Collapse

Create expandable content sections using Tailwind CSS height and transition utilities. This example shows how to build a simple collapse component with smooth animations and proper accessibility.

Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.

Collapse List

Build organized lists of collapsible items using Tailwind CSS flex and spacing utilities. Perfect for FAQs, settings panels, or any grouped content that needs to be toggled.

  • Inbox
  • Trash
  • Settings

Collapse with Icon

Add visual indicators to your collapse components using Tailwind CSS transform utilities. Icons rotate smoothly to show the current state while maintaining clean animations.

----- to be added -----

Nested Collapse

Create multi-level expandable sections using Tailwind CSS nesting utilities. Ideal for complex navigation menus or detailed content hierarchies.

----- to be added -----

Custom Collapse

Check out this example on how to design a responsive collapse component tailored for various use cases.

----- to be added -----

Required Script

Add these scripts to the bottom of your HTML:

1<script src="https://unpkg.com/@material-tailwind/[email protected]/dist/material-tailwind.umd.min.js" defer></script>