Collapse

Collapse is used for showing and hiding content.

Also see accordion examples

# 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

# Collapse using <details> and <summary> tag

`collapse-open` and `collapse-close` doesn't work with this method. You can add/remove `open` attribute to the <details> instead

Click to open/close

content

Using <details> tag, we can't have animations because <details> tag doesn't allow CSS transitions.

# 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

Do you have a question? ask the community

Do you like daisyUI? tweet about it!

Support daisyUI's development: Open Collective