Accordion

Accordion expands and collapses multiple sections of related content.

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.
• If your instance only has one item, consider using the Toggle Component instead.

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.