Accordion

Component checklist

Overview

We use the accordion wherever we need to save space. Think of the accordion as an organized summary for a lot of information. It provides a brief overview at the top, and users can explore specific sections by clicking on titles. This way, users have the flexibility to decide which parts they want to delve into.

While accordions are great for helping users process information and find what they need, keep in mind that hiding content may result in some users missing out. If the expectation is that users will read everything, it may be more effective to stick to a regular scrolling page with clear headers instead of making them click extra times in an accordion.

Best use cases for accordions

• When you have content that can be grouped logically
• When users are likely to engage with specific sections rather than all content at once
• To avoid endless scrolling when the complete content isn't essential for all users to read
• Where space is limited and displaying complete content at once is not feasible

 

Composition

Anatomy

Prioritize important information

Place crucial information in the accordion headers or the first section to ensure users see key details without having to expand every section.

 

1. Title: Contains the section title and is controlled for revealing the item.
2. Chevron: Indicates whether the item is open or closed.
3. Body: Contains the section content associated with an accordion title.

Alignment

Typically, the chevron icon is positioned at the end of the header, allowing the initial title to align seamlessly with other elements on the page—a conventional practice. However, in exceptional circumstances, one may opt to place the icon in front of the title, providing a more hierarchical, tree-like structure.

It's recommended that you stick to the default end alignment, especially for straightforward content or documentation. If placing an icon in front of the title, consistency is crucial: it's necessary to maintain a uniform placement of the icon throughout the page, without variations.

 

Content

Title

• Keep titles as brief as possible while still being clear and descriptive.
• Titles may include elements in addition to text (e.g., an avatar or link).
• Text elements should not exceed two lines in any case. It's recommended to use text truncation for a clean presentation of longer texts.

Body

The body of an accordion can contain a wide range of elements—subnavigation, form items, text, tables, and pretty much any other element you can think of.

Scrolling content

When the accordion content is longer than the viewport, let the entire accordion scroll vertically. Content should never scroll horizontally in an accordion.

 

Behavior

States

The accordion has two main states: collapsed and expanded. Look at the chevron icon at the end—it tells you whether the accordion is open or closed. A downward-pointing chevron indicates a collapsed state, while an upward-pointing one indicates an expanded state.

When a user first sees an accordion, it's usually in the collapsed state, meaning all the content panels are closed. This setup gives users a quick sneak peek at the information contained within.

Designers can decide if it is appropriate for elements (e.g. buttons) to remain visible even when the accordion is closed.

Interactions

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

Keyboard

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.

Motion

• For expanding, use --motion-easing-entry easing
• For collpasing, use --motion-easing-entry easing
• Set the duration to --motion-duration-quick-1 for both cases

For detailed information about motion in Soul Design System visit UI Motion.

Summary

Accordion components are versatile for saving space in the UI, offering a condensed view with expandable details. Best for logically grouped content, accordions should prioritize key information in headers. Accordions can be placed alongside main content or in containers. Titles should be brief, and content can vary, with scrolling for longer content. Accordions have collapsed and expanded states, indicated by a chevron icon. Motion and easing effects ensure a smooth user experience. Choose between closing or keeping other sections open based on user focus needs.