Skip to main content
BYU Websites
Brightspot Component Library

Accordions

Content stored in an expanding list.

Accordion Lists

Named after the musical instrument that compresses and expands while played, an accordion is an effective way to organize information and progressively disclose the details. For example, an accordion could be a highly effective way to present an academic major with sections such as Prerequisites, Courses, Internships, Mentoring, and Career Paths.

The example below uses the list content titled "List Accordion."

Accordion Example

  • Accordions are stacked vertically and push the page content down upon a tap or click. They expand in place to expose the previously hidden information. A second tap or click will contract the accordion, hiding the detailed section.

  • The Brightspot CMS uses a + icon to signal an expandable section. This icon rotates counter-clockwise by 45 degrees when the section expands with a tap or click, becoming an X. Tapping or clicking the section heading contracts the section.

    Within each section, Brightspot offers the usual features found in their rich text editor, such as buttons.

    Brightspot Buttons

  • With accordions, readers can quickly scan the high-level points of a topic or process. They enable readers to dive into more detail where they choose. This becomes especially useful on mobile devices by limiting the amount of scrolling necessary.

  • Readers can become disoriented when the content within an accordion section is so lengthy that they have to scroll to finish it. In this situation, edit the material down to the essentials or split the material into multiple sections.

    Don't hide a high-priority task or piece of information inside an accordion. If visitors have one common need, find a different way to make that high-priority content display prominently on a page.