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
Sponsors

Never google
a command again

Become a sponsor