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