Use an Accordion
The accordion component is a type of menu that displays a list of headers that can be clicked to reveal or hide sections of content.
Interactive Walkthrough
Instructions
When editing a page, you can enable the "Accordion Group" to display an accordion below the main content section. Once enabled, the following options will be available:
- Accordion Group Heading: A level 3 heading displayed above the accordion group
- Accordion Content: Content displayed above the accordion group, below the heading
- Accordion Enabled: When enabled, displays the list of accordion items
After selecting "Yes" for "Accordion Enabled", the first accordion item will be available for you to edit.
Add an Accordion Item
To add an accordion item:
- In the "Accordion Item" bar, click "Add new group" (+)
- Enter your "Accordion Title" text to be displayed
- Add your content to the accordion item
Once you have more than one accordion item, more controls will appear in each "Accordion Item" bar. You can use these to drag, move, copy, and delete accordion items.
Add a Sub-accordion
Sub-accordions allow you to create additional dropdowns inside of existing accordion items.
To add a sub-accordion:
- Under an existing accordion item, click "Yes" next to "Sub-accordion Enabled"
- Enter your "Sub Accordion Title" text and relevant content
The sub-accordion will appear below the content of the existing accordion item.
Best Practices
Accordions are useful for breaking down long or complex content into smaller pieces. When used correctly, an accordion can improve user experience and reduce cognitive load.
When to Use Accordions
Accordions are best used when readers only need a few key pieces of information. Pages with a frequently asked questions (FAQ) section often use accordions because many readers only need the answers to one or two questions.
When to Avoid Accordions
Avoid using accordions when most of the information on the page is relevant to the reader. If the reader needs to click on multiple accordion items to find the information they need, then it is better to show all of the content at once instead.
Congratulations!
You have completed the Cascade CMS Training