Accordion pages can be used to display larger amounts of content that can be expanded and collapsed. Accordions make the page’s main headings more scannable so that the user can pick the section(s) that are relevant to them.
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.
Use title case for accordion labels. Short, plain language labels that are easily scannable.
Always use the ampersand (&) instead of “and” in accordion labels.
When using an accordion view, accessibility and usability must be considered.
Embedded images can be used in an accordion so long as they add value to the text and respect guidelines for images.