UI Controls Dictionary > Accordions
Accordions are stacked containers with nested items that expand and collapse when clicked or tapped.
Accordions are an attractive control because they allow a lot of links to be shown in a compact space. But they can be less familiar or even intuitive, so be careful not to overuse them. They can be used either for navigation or for content, in contrast to vertical navigation.
Other names include expansion panel and expand/collapse control.
The book "Designing Web Interfaces" says that accordions are "good for collapsed modules of content. However, they should be used sparingly, as they have as strong visual style."
Part of that visual style frequently involves animating the panels as they open and close, which can seem like a "cool" effect, but often adds unnecessary interaction cost that can be avoided by using a simpler control. In that way they are similar to carousel controls, which have fallen out of favor for that reason.
While accordions are often not the best choice for desktop screens, they are more likely to be appropriate on mobile1, like this mobile navigation menu from UX Mastery:
A good reason to use accordions for navigation is when the user may want to see the whole, as well as the parts, of the navigation hierarchy. One use case is where users may want to explore the site contents before committing to a particular section or link. In that way, they are similar to hierarchical vertical navigation.
Accordion (😉get it?) to the site UI Patterns, accordions should only be used for navigation when there are:
As for using accordions for in-page content, the U.S. Web Design System suggests that if there is not a lot of content, or if users will want to see all content at once, don't use an accordion control. One valid use case example is a FAQ help page. However, don't use them only because there is a lot of content. The idea that desktop users don't like long pages is considered a myth by many.2
In all cases, avoid horizontal accordions (where panels are "stacked" horizontally). They are unfamiliar and almost always inferior to another kind of control.
The following are general guidelines that apply to most cases.
Accordions should have a clear selected state for the open panel and, if applicable, for the selected item within. A hover state should also be applied to both.
Variations should be minimized in order to keep consistent with standards. One common option is the addition of icons. The + and - icons are the most identifiable and familiar. Pointed triangles or chevrons can also be used.
The icon states should tell the user what will happen when they click.8 I.e., the plus or expand icon should be shown on collapsed panels rather than indicating that an open panel has been expanded.