Accordion

An accordion is a vertically stacked set of interactive headings that each contain a title, content snippet, or thumbnail representing a section of content. The headings function as controls that enable users to reveal or hide their associated sections of content. Accordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.

— Accordion Pattern, WAI ARIA Authoring Practices Guide (APG)

§ Notes

Missing.css uses the <details name=foo> element for accordions.

Keyboard Interaction

• Enter : Expand or collapse the associated panel.
• Space : Expand or collapse the associated panel.
• Tab : Move focus to the next focusable element; all headers in the accordion are included in the page Tab sequence.
• Shift Tab : Move focus to the previous focusable element.

§ Example