Accordion
Accordion is used for showing and hiding content but only one item can stay open at a time.
| Class name | Type | |
|---|---|---|
| collapse | Component | Container element |
| collapse-title | Component | Title element |
| collapse-content | Component | Container for content |
| collapse-arrow | Modifier | Adds arrow icon |
| collapse-plus | Modifier | Adds plus/minus icon |
| collapse-open | Modifier | Force open |
| collapse-close | Modifier | Force close |
Accordion uses the same style as the collapse component but it works with radio inputs. You can control which item to be open by checking/unchecking the hidden radio input.
All radio inputs with the same name work together and only one of them can be open at a time. If you have more than one set of accordion items on a page, use different names for the radio inputs on each set.
# Accordion using radio inputs
Click to open this one and close others
hello
Click to open this one and close others
hello
Click to open this one and close others
hello
# Accordion with arrow icon
Click to open this one and close others
hello
Click to open this one and close others
hello
Click to open this one and close others
hello
# Accordion with plus/minus icon
Click to open this one and close others
hello
Click to open this one and close others
hello
Click to open this one and close others
hello
# Using Accordion and Join together
to join the items together and handle border radius automatically
Click to open this one and close others
hello
Click to open this one and close others
hello
Click to open this one and close others
hello
Do you have a question? ask the community
Do you see a bug? open an issue on GitHub
Do you like daisyUI? tweet about it!
Support daisyUI's development:
Open Collective
