Accordion

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

Requires JS

This component requires the accordion stimulus controller.

Anatomy

Accordion do |a|
  a.item do
    a.trigger
    a.content
  end

  a.item do
    a.trigger
    a.content
  end
end

Name	Type	Default
`value:`	`string` or `array`	`nil`
The value(s) of the item(s) to expand when initially rendered. Can be a single string or array of strings.
`multiple:`	`boolean`	`false`
Determines whether one or multiple items can be opened at the same time. When true, multiple items can be expanded simultaneously.
`attributes`	`keyword arguments`

Name	Type	Default
required `value:`	`string`
Unique identifier for this accordion item. Used to control which items are open/closed.
`attributes`	`keyword arguments`

Name	Type
`attributes`	`keyword arguments`

Name	Type
`attributes`	`keyword arguments`

Key	Description
Space	When focus is on a trigger of a collapsed section, expands the section.
Enter	When focus is on a trigger of a collapsed section, expands the section.
Tab	Moves focus to the next focusable element.
Shift+Tab	Moves focus to the previous focusable element.
ArrowDown	Moves focus to the next trigger.
ArrowUp	Moves focus to the previous trigger.

On This Page