Accordion pages can be used to display larger amounts of content that can 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 page’s main page headings more 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.
...
Use an accordion to allow the user to have control over the content by expanding only what they want to read.
...
Accordions can be used when aiming to reduce the overall length of page content. However, a accordion should not be used in lieu of copy editing. Always start by reducing your content to what is essential.
...
Users can open multiple accordion sections at a time, unlike tabs.
...
Accordion view is recommended over tabs if there are more than five sections.
...
Accordions must be made up of more than one section. If there is only one section, do not use an accordion.
...
Even when you have multiple sections of content, an accordion may not be necessary; exposing all content might be the best option if you want all of your content to be scannable or if all content should be read in sequence.
...
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.
When using an accordion view, accessibility and usability must be considered.
Embedded 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.