Accordion expands and collapses multiple
sections of related content.
Information on how to implement this component is available for the following technologies.
Accordion is used when you have lower-priority
content that needs to be broken up into digestible chunks.
- 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.
- An Accordion Item must have a left aligned title.
- An Accordion Item must contain content.
- An Accordion Item must have a right aligned
- 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.