Accordion

The accordion template allows content to be hidden until requested. It allows the user to display mutually exclusive and/or secondary content by allowing content to be expanded and collapsed. Accordions make the main page headings scannable so that the user can pick the section(s) that are relevant to them and prevent secondary content from interfering with the main tasks.

Criteria

To use the accordion template, two or more accordions must be necessary.
Do not use the accordion template when there is only a need for one accordion.
Always use title case for accordion labels (first letter of each word is capitalized, except for small words).
Avoid using questions in accordion labels. For example, use How to Apply instead of How to Apply?
Short, plain language labels that expressly state what is inside the accordion are more easily scannable.
Always use the ampersand (&) instead of “and” in accordion labels.
Inline images can be used in an accordion so long as they add value to the text and respect guidelines for images.
A Highlight or Call-to-Action component cannot be used in an accordion.
Users can open multiple accordion sections at a time, unlike tabs.
Despite multiple sections of content, an accordion may not be necessary. When all content should be read in sequence or a scannable at once, using the standard template may be a better option.
Accordions can be used when aiming to reduce the overall length of page content by hiding secondary content but are not to be used in lieu of copy editing. Always begin by reducing content to what is essential.