Accordion

Accordion expands and collapses multiple sections of related content.

Developer Documentation

Information on how to implement this component is available for the following technologies.

Usage

Accordion is used when you have lower-priority content that needs to be broken up into digestible chunks.

Guidelines

  • By default, all section of an Accordion are collapsed, so high-priority content should be avoided.
  • Avoid complex interactions in Accordion. Things like forms, buttons, dropdowns, and nested Accordions weaken usability.
  • Keep Accordion titles short so the text stays on one line.
  • Accordion titles should be relevant to the content inside so the user can quickly decide if opening it will provide the information they need.
  • The width of the Accordion should be controlled by the layout of the page.
  • Expand/collapse is indicated by a chevron Icon, but the entire header area is clickable for the same action.

Anatomy

  • An Accordion Item must have a left aligned title.
  • An Accordion Item must contain content.
  • An Accordion Item must have a right aligned Chevron-[Up/Down]-Circle-Two-Color Icon

Accessibility

  • Can be accessed through the keyboard. TAB and SHIFT-TAB are used to navigate through Accordion titles and ENTER will expand or collapse each section.