Official daisyUI Figma Library is now available for designers!

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