Usability
It’s not recommended to close and open the accordion areas at the same time. Jumping content and uncontrolled behaviour increase the cognitive load. Opened or closed elements should remain in this state until the user changes them. Let users control when the content moves or changes (w3.org)
Do’s & Don’ts
- Headings and titles must be descriptive.
- Use accordion to organize non crucial information (e.g. FAQ).
- Do not use another expand and collapse interaction element inside the accordion.
- Do not place an accordion in an accordion.
- It’s not recommended to use a scrollbar inside the accordion.
- Do not use other colour than white as content colour.
- On mobile drilldowns might be the better solution than accordions.
- Do not misuse accordions as vertical progress bars.