Tailwind CSS Collapse
David UI's Collapse component provides an elegant solution for organizing content in expandable sections. Styled with Tailwind CSS, it supports smooth transitions, icons, and fully customizable designs.
Explore our responsive Collapse component examples, styled with Tailwind CSS, which are perfect for enhancing usability in your web or mobile projects.
Basic Collapse
This component is ideal for building features like accordions, mobile menus, file trees, and more. Copy and paste the code below directly into your project.
Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
Collapse List
Check out this example to discover how to design a responsive collapse component tailored for various use cases.
- Inbox
- Trash
- Settings
Required Script
The Collapse component in david-ai requires JavaScript to handle the expand/collapse functionality. The library provides smooth transitions and toggle behavior through data attributes.
Installation
To use the Collapse component in your project, you first need to install the david-ai library via npm:
Basic Usage
Using with Global Access
If you prefer, you can use the DavidAI global object instead of directly importing initCollapse:
Using with CDN
You can include david-ai via a CDN and initialize collapse functionality globally in the browser. Add the following script to your HTML file:
