Accordion

Accordion is a container that expands to show content and collapses to hide it.

Overview

An accordion displays secondary content to users using progressive disclosure. It can be singular or multiple accordions can be stacked vertically. Each accordion header functions as navigation and lets users control what to pay attention to (by expanding) and what to ignore (by collapsing).

Anatomy

Acordian anatomy
  1. Header: Includes the label and serves as the control for expanding and collapsing.
  2. Icon: Shows if the panel is expanded or collapsed.
  3. Panel: The surface that holds the content described by the label.

When to use

Use an accordion to display noncritical content in these scenarios:

  • To organize related information into sections.
  • To shorten a page to reduce scrolling.

When not to use

Use another component to display content in these scenarios:

  • To provide critical information necessary to understand or complete the experience.
  • To guide users through a process or steps.

Variants

Bordered

There are dividing borders between headers.

Borderless

There are no dividing borders between headers.

Behaviors

Interactions

All of the header area in an accordion is interactive to provide better affordance to expand or collapse a panel.

States

Collapsed

By default an accordion is collapsed so that users can review the information architecture provided by the accordion headers.

When an accordion is collapsed it uses the chevron pointing down icon

Expanded

When the user interacts with the header and its control, the accordion is expanded so that users can view the content within the accordion panel. 

  • Multiple panels can be expanded at a time so that different sections of content are easily accessible.
  • Accordions remain expanded until the user collapses it.

When an accordion is expanded it uses the chevron pointing up.

 

Interactive states

Hover

The hover state is initiated when a user pauses over the header with their cursor.

Focus

The focus state is initiated when a user clicks the header, expanding the panel.

Disabled

The disabled state prevents the user from clicking the header to expand the panel.

Accessibility

Odyssey components are designed and built to meet accessibility requirements out of the box. So, designers and engineers can focus on any accessibility concerns unique to their problem areas.

Our components meet WCAG 2.2 AA criteria and WAI-ARIA guidelines to provide a usable and accessible experience to everyone. See the ARIA guidelines for accordion.

Content guidelines

Header

  • If using multiple accordions, order the headers in a logical sequence.

Label

  • Set clear expectations about the accordion’s purpose.
  • Be concise, clear, and descriptive.
  • Make the labels as parallel as possible in structure and length. For example, all single word nouns or all short subheading-like phrases.
  • Use sentence case.

Panel content

  • While any type of content can be in an accordion, text is the most usual content type.
  • Content should be focused on the topic indicated in the header. If there is content on another topic, it should have its own accordion.
  • Create a logical hierarchy that prioritizes what users need to know.
  • Make the content as scannable as possible by using subheadings, paragraphs, and unordered or ordered lists when appropriate.
  • Don’t rely on content in another accordion panel for the current panel to make sense. It can be difficult for users to retain information and/or jump back and forth between accordions to make sense of the content.

Content accessibility

No additional content is needed for header label accessibility.

If any panel includes non-text content, such as a non-decorative image, consult our Accessibility guidelines.

Figma: accordion