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).
Best practices
Always prefer clear and concise labels to facilitate reading and invite the user to scroll through the content.
Try to make the title as short as possible. It will bring clarity and more straightforward information.
Always use a "+" icon to expand and an "-" icon to close.
Do not use another icon to expand or close accordions.
Use a "Collapse all" and an "Unfold all" when grouping several accordions together. This allows the user to easily arrange the content visible on the screen.
Don’t make it hard for the user to arrange the content visible on the screen.
Behaviours
Accordion has 5 states: default (collapse), hover, active (open), focus and disable. All the area of the collapse
Accordion is interactive, meaning that the user don’t have to target the icon or the label to interact with the component.
Code & Design assets
Request code and design assets for creating user interfaces.
Can I contribute to the System?
Of course! Your contribution is more than welcomed and the System team will always be here to review your contributions or discuss.