Use accordions to separate independent controls, simplify linear workflows, or collapse insignificant content

Pros:

·       Saves space

·       Can be created using CSS only

·       Straightforward

Cons:

·       Forcing people to click on headings one at a time to display full content can be cumbersome

·       Not advisable for large sections of content that require lots of scrolling to navigate between accordion items

·       Cannot be nested

 

When to use:

·       Menus with only two levels and less than 10 sections

·       When content at each section is mutually exclusive or independent from each other (i.e. the user does not have to scroll up to review information from another item to achieve their current goal)

o   For example: Search filters in sidebars

·       When people need only a few key pieces of content on a single page

·       For long content viewed in mobile screens

·       For linear processes

 

When to avoid:

·       When your audience needs most or all of the content on the page to answer their questions. Save people the hassle of clicking on links needlessly

·       When there are more than 2 levels of menus

 

Best practices

·       When the panels provide parallel context (e.g. search filters), allowing user to have several sections visible simultaneously might be a good idea.

·       When the panels are used for linear workflows (e.g. checkout process), show only one section at a time.

·       When using accordions for navigation, preserve its state (e.g. opened sections must remain opened) while navigating different webpages

·       Provide visual cues that an item has been expanded. For example:

o   Use the opposite appearance of the default icon (see below)

o   Indent the lower level items

o   Add a different background color for lower level items

  • Use the corresponding accordion controls based on your goal:

Controls

 

Purpose

 

+ / -

 

Suggests actions of expanding/collapsing vertically

Arrows that point down / up

Suggests reveal/hiding of content vertically

Arrow that point right / arrow that point down

Indicates child items