Collapsible

A vertically stacked set of interactive headings that each reveal a section of content.

Requires JS

This component requires the collapsible stimulus controller.

Anatomy

Collapsible do |c|
  c.trigger
  c.content
end

Name	Type	Default
`open:`	`boolean`	`false`
Initial visibility state of the collapsible content. When true, the content will be visible on page load.
`attributes`	`keyword arguments`

Name	Type	Default
`as_child:`	`boolean`	`false`
When true, merges the trigger functionality with the child element instead of wrapping it in a div.
`attributes`	`keyword arguments`

Name	Type
`attributes`	`keyword arguments`

Key	Description
Space	Opens/closes the collapsible.
Enter	Opens/closes the collapsible.

On This Page