Components

Accordion

What

An accordion is a section that can expand and collapse vertically by clicking on its header.

Why

To help a section fit in a space and to progressively expose content. An accordion also reduces scrolling on a page with a lot of content.

Where

Usually within another larger section combined with other accordions

Best Practices

Accordions are best used when only some of the content on the page will likely be used at once by a user. If the user is likely to want to access most of the content on the page, accordions can be cumbersome and can slow the user down. Consider whether it is better for the user to see all of the headings at once and choose where to see more or if it would be more helpful to show all the page’s contents at once.
Be aware that accordions increase interaction cost.
Hiding content might make that content easier for a user to miss or ignore.

Related Principles

Design Systems

A design system is a set of design standards for a company or a specific project. The primary elements of a design system are: color & text styles, icons & illustrations, and commonly used components. It can also include things like code standards, layout...

UX/UI Design Glossary

Chrome Visual elements that provide users information about or commands to use the screen's content. Chrome is not part of the content itself. Examples would be buttons, labels, and menus. Edge Case An uncommon situation when a user's experience falls outside the...