Accordion should be used to reduce cognitive workload on the screen. It’s an effective way to display content without having to create multiple pages. It is primarily used on pages with content (e.g.: product description, F.A.Q, etc.), but also in forms (to display secondary fields) or even in filter panels to have a section that can be enlarged or reduced.
The content inside the accordion may be editorial content: text, image, video etc.
It is possible to create accordion lists. Multiple accordions can be open simultaneously, either one by one or all at the same time (Collapse all / Unfold all).
- Prefer concise labels.
- Never use alert messages inside an accordion : an open accordion should not show high priority information.
- Always use a "+" icon to expand and an “-“ icon to close.
- Use a Collapse all / Unfold all when grouping several accordions together.