Requires David UI JS

Tailwind CSS Accordion

David UI's accordion component is built with Tailwind CSS and HTML to create sleek expand/collapse sections. Perfect for FAQs, menus, and content toggling, it provides an interactive way to organize information.

Customize styles effortlessly and explore examples to integrate this versatile, responsive component into your design.

---

#Basic Accordion

Create an SEO-optimized accordion component with exclusive mode using data-dui-accordion-mode="exclusive". This ensures only one section stays open at a time, ideal for FAQ pages and content organization. The semantic HTML and ARIA attributes enhance both accessibility and search engine visibility while providing an excellent user experience.

---

#Accordion All Open

Enhance content accessibility and SEO with the "all-open" accordion mode. Using data-dui-accordion-mode="all-open" allows users to view multiple sections simultaneously while maintaining collapse functionality. This feature optimizes content visibility and user engagement by displaying information upfront. Ideal for documentation and content-rich pages, the semantic HTML and ARIA attributes ensure proper accessibility and search engine indexing.

---

#Controlled Accordion

The Accordion component can operate in both controlled and uncontrolled modes. In controlled mode, you have full control over its state using the value and onValueChange properties.

---

#Accordion Custom Icon

Customize the accordion's toggle icons using data-dui-accordion-icon-close and data-dui-accordion-icon-open attributes. These allow you to seamlessly switch between different icons based on the accordion's open/closed state, enhancing visual feedback and user experience.

---

#Accordion Custom Styles

Tailor the appearance of your Accordion by applying styles through the className property. The example demonstrates how to design a unique look for the Accordion component.

---

#Accordion Disabled

Enhance accessibility and user experience by disabling specific accordion sections using aria-disabled="true". This attribute prevents user interaction and clearly indicates non-interactive content, improving both SEO and usability. Disabled sections maintain visual consistency while being properly marked up for screen readers and search engines.

---

#Required Script

The Accordion component in david-ai requires JavaScript to handle the accordion functionality. The library provides smooth transitions and collapse/expand behavior through data attributes.

#Installation

To use the Accordion 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 initAccordion:

#Using with CDN

You can include david-ai via a CDN and initialize accordion functionality globally in the browser. Add the following script to your HTML file:

#HTML Code Example

---

#TypeScript

David AI Accordion 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 Accordion component with TypeScript for dynamic section toggling. This component provides programmatic methods to open, close and control accordion sections with full type safety and customization options.

#HTML Structure

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

• Semantic button elements for triggering each accordion section
• ARIA attributes and states for screen reader support
• Smooth height transitions and animations for content visibility
• Dark and light theme compatibility with Tailwind CSS
• Responsive content sections with hover states
• Additional control buttons for programmatic interaction
• Proper content overflow handling
• Exclusive mode where only one section can be open at a time

Here's the complete HTML implementation:

---

#Props & Methods

The Accordion component provides a way to create collapsible content sections with smooth animations and accessibility features. It supports exclusive mode where only one section can be open at a time, as well as programmatic control through methods like toggle, show, hide, showAll, and hideAll.