Picchu

Accordion

Guidance

An accordion menu is a vertically stacked list of headers that can be clicked to reveal or hide content associated with them.

Accordions shorten pages and reduce scrolling, but they increase the interaction cost by requiring people to decide on topic headings. In many situations when all the page content is relevant to users, it is more advantageous to show all the content at once, even if doing so results in longer pages.

Usage scenarios

  • When people need only a few key pieces of content on a single page. By hiding most of the content, users can spend their time more efficiently focused on the few topics that matter.
  • When the information is restricted to very small spaces, such as on mobile devices. On small screens people often stop scrolling before reaching the end of an extremely long page.

Styling and Behaviors

  • By default, accordion headers are contained in a 47px height container.
  • 1px divider lines between accordion rows #C8C8C8
  • Headings left justified; 24px left-padding until mobile breakpoint at 8px left-padding; (#0060AC default; may adjust to match your brand's link color)
  • Expand/collapse icons 16px, right justified with 24px right-padding until mobile breakpoint at 8px right padding. Use E948 CalculatorAddition and E949 CalculatorSubtract icons respectively (Note: verify these are right icons? Can't seem to find ones with proper weight.).
  • Entire header bar/row is clickable to expand/collapse. When a row is expanded, its header bar background color becomes #E3E3E3.
  • Ensure that collapse occurs only as a deliberate result of a collapse selection on the part of the user (i.e. opening one item should NOT close other items)
  • Include Expand all / Collapse all links above your accordion, flush right (#0060AC default; may adjust to match your brand's link color)
  • As a best practice, pair pages containing accordions with print functionality that allows all topics to be printed (and without the user having to expand them).

Demo

See the Pen Accordion Demo by Microsoft.com (@microsoft) on CodePen.

Resources