Create Collapsible Content Sections
An accordion is a design component that organizes content into a list of expandable and collapsible sections. Users click a header to reveal its associated content, helping you manage complex pages and avoid overwhelming your visitors.
Interactive Walkthrough
Instructions
1. Enable the Accordion Component
While editing a page, you can add an accordion group below the main content.
- In the page editor, locate the "Accordion Group" section.
- Configure the following options:
| Field | Purpose |
|---|---|
| Accordion Group Heading | An optional H3 heading that appears above the accordion. |
| Accordion Content | Introductory text to display above the accordion group. |
| Accordion Enabled | Select "Yes" to activate and display the accordion items on the page. |
Once enabled, the first accordion item will appear and is ready for your content.
2. Add & Manage Accordion Items
- In the "Accordion Item" bar, click "Add new group" (the
+icon). - Enter your "Accordion Title"– this is the clickable header your users will see.
- Add your content to the accordion body using the text editor.
With more than one item, you'll see additional controls in each "Accordion Item" bar, allowing you to:
- Drag to reorder items
- Copy an existing item
- Delete an item
- Move items up or down
3. Create a Sub-accordion
Sub-accordions create nested, expandable sections inside an existing accordion item. Use this feature sparingly, as too many layers can confuse users.
- Under an existing accordion item, locate the "Sub-accordion Enabled" field.
- Select "Yes".
- Enter a "Sub Accordion Title" and add its content.
- The sub-accordion will appear below the main content of its parent item.
Best Practices
Accordions are powerful tools for simplifying content, but using them in the wrong context can hide important information. Follow these guidelines for the best user experience.
| ✅When to Use Accordions | ❌ When to Avoid Accordions |
|---|---|
| Readers typically need only a few key pieces of information. | Most information on the page is relevant to the average reader. |
| Content sections are self-contained and don't need side-by-side comparison. | Users would need to open multiple sections to compare or find what they need. |
| For pages like FAQs, where users scan for a single, specific answer. | The content is short enough to display fully without scrolling. |
| You want to reduce visual clutter on a long page. | Hiding content makes it less likely users will find critical information. |
Examples
Good Use Case: Frequently Asked Questions (FAQ)
An FAQ page is ideal for an accordion because:
- Users typically seek just one or two specific answers.
- Each question is independent.
- Displaying all answers at once would create an overwhelmingly long page.
Poor Use Case: Course Requirements Page
A page listing degree requirements would not work well as an accordion because:
- Students need to see all requirements at once to plan effectively.
- Requirements often need side-by-side comparison.
- Clicking each item adds unnecessary friction and risks someone missing a vital requirement