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
Learn how to create a straightforward, responsive Accordion component. It's a versatile tool, perfect for including FAQ sections on your site.
Accordion All Open
Initialize all Accordion sections as expanded by default by providing an array of values to the defaultValue property.
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
Personalize the icon for the Accordion trigger using the Accordion.Trigger component. By leveraging the group-data-[open=true] attribute, you can dynamically show or hide icons based on the Accordion state.
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
Prevent user interaction with specific Accordion sections by applying the disabled property. Disabled items will not respond to user actions.
