With an Accordion you have the ability to group together related content and show it as an expandable list. This keeps the list concise and saves vertical space while allowing more information to be provided if desired.
The title of each section of the Accordion is always visible. The hidden content below is indicated by the icon on the right edge. The current item collapses when the user expands another one.
Dos and don’ts
- Do not use an Accordion to hide important content. It could easily be missed.
- Keep Accordions to a single level, do not nest Accordions inside another Accordion.
- Do not use an Accordion when you have the possibility to show the hidden content on another page. A Collection is a better choice for a linked list.
- Keep Accordion titles short. When more Accordion items are used as a group they should stay clear and scannable.