Accordion

Accordion holds sections that hide or reveal related information.

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.