Requires David UI JS

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.

---

#Collapse List

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

---

#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:

#HTML Code Example

---

#TypeScript

David AI Collapse component can be used programmatically with TypeScript support for more control and type safety:

#Programmatic Usage with TypeScript

Learn how to use David AI's Collapse component with TypeScript for dynamic content toggling. This component provides programmatic methods to expand, collapse and animate content with full type safety and customization options.

#HTML Structure

The HTML structure demonstrates an accessible and interactive collapse component featuring:

• A semantic button element for toggling content visibility
• ARIA attributes for screen reader support
• Smooth CSS transitions and animations
• A rotating chevron icon indicating expanded/collapsed state
• Dark and light theme compatibility with Tailwind CSS
• Responsive navigation menu with hover states
• Additional control buttons for programmatic interaction

Here's the complete HTML implementation:

---

#Props & Methods

The Collapse component provides a way to toggle the visibility of content with smooth animations and accessibility features. It supports icon rotation and programmatic control through methods like toggle, expand, and collapse.