Accordion

Accordion holds sections that hide or reveal related information.

Developer Documentation

See the code and developer guidelines for this component.

Usage

Use Accordion to separate supplementary (lower-priority) content into digestible pieces.

Guidelines

  • Accordion sections are collapsed by default. Because this hides content, only use this to augment information already on the page. Avoid high-priority content.
  • Avoid adding complex interactions like forms, buttons, and dropdowns. They complicate the user's experience.
  • Do not put an Accordion inside of another Accordion.
  • Keep Accordion titles succinct, clear, and short enough to be in one line.
  • Accordion titles should be relevant to the content it reveals. A user should know exactly what to expect when they expand a section.
  • If your Accordion only has one item, use the Toggle Component instead.

Anatomy

  • An Accordion Item must have a clickable header that reveals or hides information.
  • 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-circle` or `chevron-down-circle` Icon

Accessibility

  • Accessible through keyboard.
    • Tab and Shift + Tab keys navigate through Accordion item headings.
    • Enter and Space keys expands or collapses each section.