accordion

16 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Accordion definition and purpose

An accordion is a vertically stacked list of headers that reveal or hide associated sections of content. It delivers large amounts of content in a small space through progressive disclosure. The header title gives users a high level overview of the content, allowing them to decide which sections to read.

When to use accordion

Use an accordion to organize related information, to shorten pages and reduce scrolling when content is not crucial to read in full, and when space is at a premium and long content cannot be displayed all at once, such as on a mobile interface or in a side panel.

When not to use accordion

Do not use an accordion when organizing large amounts of information that can be nested; consider using tree view instead. Do not use an accordion if a user is likely to read all of the content, as it adds the burden of an extra click; instead use a full scrolling page with normal headers.

Accordion anatomy

An accordion consists of three main parts: (1) Header, which contains the section title and is the control for revealing the panel; (2) Icon, which indicates if the panel is open or closed; (3) Panel, which is the section of content associated with an accordion header.

Accordion flush alignment specification

Flush alignment places the row title and chevron icons with 0px padding, keeping them flush to the rule dividers. For hover and focus interactive states, the left and right padding receives an additional 16px padding. Use flush alignment when designing within smaller spaces on a page such as side panels or sidebars to achieve better text alignment with other content and to help avoid converging rule lines between components that are close to each other on a page.

Accordion icon alignment default

By default the chevron icon is placed on the end side of the header. This allows for the title on the start side to align with other type elements in the layout, which is the preferred alignment scenario. Most instances should use the default end alignment, especially for any pure content or documentation purposes.

Accordion icon alignment start variant

In rare scenarios, the accordion may be modified to place the icon on the start side in front of the title to function more like a tree. Icon placement in accordions should be consistent throughout a page and should not alternate.

Accordion grid placement with default alignment

When placing an accordion on the 2x Grid with its default alignment, the indented title and content align to the grid columns, and the top and bottom borders hang into the gutter. The accordion can be modified to have flush alignment where the titles and content are instead flush aligned with the top and bottom borders having 0px padding.

Accordion title content guidance

The title should be as brief as possible while still being clear and descriptive. Each title should be wrapped in a role heading (h1-h6) that is appropriate for the information architecture of the page.

Accordion body copy content guidance

Content inside of an accordion section may be split into paragraphs and include sub-headers if needed.

Accordion scrolling behavior

When the accordion content is longer than the viewport, the whole accordion should vertically scroll. Content should not scroll inside of an individual panel. Content should never scroll horizontally in an accordion.

Accordion default state

Accordions begin by default in the collapsed state with all content panels closed. Starting in a collapsed state gives the user a high level overview of the available information.

Accordion states

The accordion component has two main states: collapsed and expanded. The chevron icon at the end of the accordion indicates which state the accordion is in. The chevron points down to indicate collapsed and up to indicate expanded. In addition to the collapsed and expanded states, accordions also have interactive states for focus, hover, and disabled.

Accordion multiple sections open

A user can independently expand each section of the accordion, allowing for multiple sections to be open at once.

Accordion mouse interaction

Users can trigger a state change by clicking on the chevron or clicking anywhere in the header area.

Accordion keyboard interaction

Users can navigate between accordion headers by pressing Tab or Shift-Tab. Users can trigger a state change by pressing Enter or Space while the header area has focus.

Give your agent this brain