Accordions

The accordion element delivers large amounts of content in a small space through progressive disclosure.

Specifications

Accordion (aka expansion panel) is a vertically stacked, full-width, list of options that can expand/collapse to reveal or hide more associated content.

  • Accordions can display directly on the page or in a card container.
  • The arrow icon acts as an affordance to indicate the functionality of the accordion, and as a visual marker of the state of the accordion through its rotation and direction.
  • When stacking multiple accordions, use stack space constants to add margin-bottom to the block element.

Anatomy

Accordion Anatomy

Types

Contained

Use contained Accordion for most of the cases. Separate its items by a slightly visible divider. This placement either saves some vertical space.

Contained Accordion

Separated

There are some cases when you can separate Accordions with whitespace. Use this method to divide when it’s needless to save vertical space.

Separated Accordion

Sizing

Sizing

States

Default states for Accordion are:

  • Collapsed
  • Expanded
  • Focused
  • Disabled

States

Chevron Placement

Chevron icon represents the opportunity to expand/collapse Accordion item. Once Accordion was clicked, the chevron rotates to indicate the successful expansion. Further collapse returns the chevron to a previous position.

Chevron could be placed both at the left or right.

Chevron Statement

Instead of a chevron, you may use the following symbols:

  • Up / down caret
  • Plus / minus
  • Up / down arrow

Chevron Alternatives

Additional Icon

In the case of right-sided Accordion, you may place additional icons to strengthen the meaning. Use wisely not to overload the component.

Additional Icon

Behavior

Expanded Items

Highlight expanded state to let a user recognize what is opened in case of multiple Accordions. There are several possible styles for the highlighting:

  • Elevation Shadow
  • Background Fill
  • Outline Stroke

Accordion Expanded Items

While the elevation works well on both smooth gray and white surfaces, you may fill the Accordion expanded item’s background with an appropriate Trimble fill. Fits good for white surfaces. Add outline stroke, if necessary.

Accordion Expanded Items

  • Accordions allow a single section to expand at one time, while automatically collapsing the section that loses focus (default behavior), or they allow for all sections to expand at the same time.
  • When an accordion expands and collapses, only its height should change; its width should stay consistent.
  • The expand-and-collapse functionality of an accordion is tied to the entire header of the element with additional actions being triggered only by interaction within the bounds of their related UI element.
  • Avoid “nested” accordions—that is, collapsible content within collapsible content. This type of pattern goes against UX best practices.

Editorial

  • Keep titles to five words, if possible, to avoid wrapping.
  • Use title case and capitalize prepositions of four letters or more.