An accordion is a menu that serves as a secondary set of navigation for the page. Accordions show and hide content, and clicked headings open a "drawer" to reveal detailed content.
From a design or content perspective, accordions allow editors to add more content to the page while keeping the page length short and reducing scroll. When used as intended, accordions allow users to get the big picture before diving into more specific content.
What Do Accordions Look Like?
Tips for accordions
- Write clear headers. Headers often determine whether or not visitors click to explore more content. Confusing or misleading headlines could be frustrating to your visitors.
- Put valuable information in each section. Visitors expect to be rewarded with content every step of the way.
- Don't put multiple links to the same destination in an accordion. Users should not be asked to click twice to see the same information.
More tips for accordions
- Keep accordions limited to six levels. If there are more levels, search engines don’t know what’s important, and the content could be ranked poorly.
- Audiences stop reading if there’s too much to choose from. Keep the focus so the audience can, too.
- Make sure images are sized correctly. If images are too big, your visitors could get frustrated and move on.
How to Create an Accordion
- While logged into the website, navigate to the page you want to edit.
- Click New Draft or Edit Draft.
- Scroll down to the location where you want to add your accordion. Click the blue plus [+] symbol, then choose Accordion from the menu
- Check the “Display closed” box if you want your first accordion element to appear closed the first time a user sees it
- Give the first accordion element a title
- Then, under “sub wrapper”, click the content element you would like to add (usually "Add Text")
- Add and style your content in the content window
- When you're ready to add another accordion element, scroll down to the bottom of the window and click Add Accordion Element. Repeat steps 5-7.
- When you're finished adding accordion elements, click Save
- Scroll to the bottom of the page and click the Save and Create New Draft or Save and Publish button