Accordion
Accordion is used to show and hide content in collapsible sections.
Installation
npx jsx-daisyui add accordionDefault
accordion-default
What is daisyUI?
daisyUI is a component library for Tailwind CSS that adds class names for building UI components.
How do I install it?
Install via npm:
npm install daisyui and add it to your Tailwind config.Is it free?
Yes, daisyUI is free and open-source under the MIT license.
Arrow icon
accordion-arrow
Click to open
This accordion uses the arrow icon variant.
Another item
Arrow collapses show a chevron that rotates on open.
Plus icon
accordion-plus
Click to expand
This accordion uses the plus/minus icon variant.
Another item
The plus icon changes to a minus when open.
Joined
accordion-joined
First section
Content for the first section of the joined accordion.
Second section
Content for the second section.
Third section
Content for the third section.
Props
Accordion
| Prop | Type | Default | Description |
|---|---|---|---|
name | string | - | Name attribute for all items to group them (allowing only one to be open at a time). Auto-generated if omitted. |
joined | boolean | - | Applies 'join' styling to make the accordion items sit flush together. |
Accordion.Item
| Prop | Type | Default | Description |
|---|---|---|---|
icon | 'none' | 'arrow' | 'plus' | 'none' | Determines the icon variant to display on the trigger. |
joined | boolean | - | Applies joined styles to the individual item. Usually set to true if the parent Accordion is joined. |
defaultOpen | boolean | - | Opens the accordion item by default on initial render. |