Layout & Component Blocks

Accordions

Overview

Accordions organize content into vertically stacked sections where each section can be expanded to reveal more details or collapsed to hide them. Each accordion consists of a heading (always visible) and a content panel (hidden when collapsed). This component helps manage large amounts of information without overwhelming the user.

View Accordions Component Demo

When to Use

  • To organize related content into manageable sections.
  • To shorten pages and reduce scrolling when not all content is critical.
  • When users only need to access key information contained within a few sections.
  • To improve scanability and allow users to focus on what matters most.
How To

How To

Create An Accordion

  1. Navigate to the page you’d like to update, and enter the Edit Mode for the page.
  2. Choose the Section you would like to add the block, click the plus (+) icon.
  3. Select the Accordion component from the component list.

Add Heading and Introduction Text

  1. Heading: the heading that will display above the accordion items. This is a great way to introduce the accordion items below.
  2. Text: enter the body copy to support the heading and further introduce the accordion items.

Add Accordion Items

  1. Click plus sign (+) icon under Add Items to add an accordion item.
Screenshot of accordion component highlighting first three steps: add a heading to the component, add text to introduce accordions, then add accordion item

Add Content to Accordion Item

  1. Heading (required): This is the accordion heading that will display whether the component is open or closed.
  2. Content: All accordion items will accept text, button group, and/or an image component types as content.
    1. To add text, click the Add Text button to add text.
    2. To add an image or button group, click the Dropdown Arrow to select the appropriate component.
  3. Click Save once you have added all the components you want to the accordion item. 
Accordion component item modal highlighting where to edit the heading and add content to the accordion item

To Add Multiple Accordion Items

  1. Hover or tab to an existing accordion item until the add item option appears.
  2. Click the plus (+) icon above an item to add a new one above it.
  3. Click the plus (+) icon below an item to add a new one below it.
  4. After adding all items, click Save button.
Accordion component with circles highlighting how to add a new accordion item to the accordion component

Reorganize Accordion Items

Placed an item in the wrong spot? You can easily reorder items within the accordion component:

  1. Drag and drop
    • Hover over the item you want to move.
    • Click the six-dot handle in the menu and drag the item to the desired position.
  2. Keyboard navigation
    • Tab to the item, select it, then use arrow keys to move it up or down.
  3. Manual Move
    • In the accordion settings, click the up or down arrows to reposition the item.
  4. Once all items are in the correct order, click Save. 
An accordion item with the accordion item settings displayed showing how to select and drag and drop or to manually move with up and down arrows.

User Experience Best Practices

  • Enhance Content Discoverability: Use accordions thoughtfully to organize content without hiding critical information. Ensure headings are clear and descriptive so users can easily identify what’s inside.
  • Reduce interaction cost: Keep accordion usage minimal and purposeful. When used, make sure the most important content is visible by default and that expanding panels feels intuitive and effortless.
    • If the items inside the content panel are brief, consider using a Text Editor component with a heading and content below it. Your page will be easier to skim, which most website visitors do.
    • For example, if you have Frequently Asked Questions and the answers are long, use Accordions. If the answers are brief, use Text Editor. 

Related Components

  • Spotlights: this components offers a stylistic way to showcase accordions with an image.