Collapse

Collapse is used for showing and hiding content.

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

# Collapse with focus

This collapse works with focus. When div loses focus, it gets closed

Focus me to see content

tabindex="0" attribute is necessary to make the div focusable

# Collapse with checkbox

This collapse works with checkbox instead of focus. It needs to get clicked again to get closed.

Click me to show/hide content

hello

# With border and background color

Focus me to see content

tabindex="0" attribute is necessary to make the div focusable

# With arrow icon

Focus me to see content

tabindex="0" attribute is necessary to make the div focusable

# With arrow plus/minus icon

Focus me to see content

tabindex="0" attribute is necessary to make the div focusable

# Force open

I have collapse-open class

tabindex="0" attribute is necessary to make the div focusable

# Force close

I have collapse-close class

tabindex="0" attribute is necessary to make the div focusable

# Custom colors for collapse that works with focus

Use Tailwind CSS `group` and `group-focus` utilities to apply style when parent div is focused

Focus me to see content

tabindex="0" attribute is necessary to make the div focusable

# Custom colors for collapse that works with checkbox

Use Tailwind CSS `peer` and `peer-checked` utilities to apply style when sibling checkbox is checked

Click me to show/hide content

hello

Prev Chat bubble

Next Countdown

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

Edit this page on GitHub

Collapse

Sponsors

Sponsors

Collapse

Sponsors

Sponsors

Congratulations random Internet user!

Congratulations random Internet user!

Congratulations random Internet user!

Congratulations random Internet user!

Congratulations random Internet user!

Congratulations random Internet user!