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 |
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 see a bug? open an issue on GitHub
Do you like daisyUI? tweet about it!
Support daisyUI's development: Open Collective
