Official website

of the Commonwealth of Pennsylvania

Components

Accordion

Accordions provide a way to hide or expand large sections of content.

Overview

Accordions provide a way to hide or expand large sections of content. Each accordion includes a heading and a text area. They're usually seen in groups.

Accordions can be helpful for saving space and reducing user overwhelm. However, they can also obscure important information. 

To get the most out of your accordions:

  • Use short and descriptive headings that are easy to compare to each other.
  • Keep your accordion group relatively small. It should be simple to scan the headings as a list.
  • Don't rely on accordions to format all of your page content. They are best paired with other components.

Usage

When to use

Accordions are best suited to:
  • Content that is only relevant to a specific group of users.
  • Scenarios where a user might choose one or two headings to expand while ignoring the other accordions. For example, a webpage about visiting a physical location might include separate accordions for parking, biking, ride share, transit, and walk-up visitors.
  • A small collection of headings and related text. More than a handful of headings in a row can overwhelm the user.

Effective headings are critical, since users can't gather context clues from collapsed accordions.

When not to use

  • Avoid using accordions to organize all of your content. Consider splitting content across multiple sections, pages, or views instead.
  • Do not put critical information in an accordion.
  • It can be harder for both humans and search engines to find text within an accordion. If your users should be able to find the text by searching online, use a text area instead.

Accessibility

Each accordion requires a heading. Verify that the heading hierarchy of the page is correct, including the accordion headings.

Related components

We want to hear from you

This is a pre-release version of Keystone Design System. If you're a beta tester, we want your bug reports, questions, and feedback.

 

Complete our form to share your thoughts—just log in with your PA.gov email. We'll review and consider every response.