An accordion is a menu that serves as a secondary set of navigation for the page. It is used to show (and hide) HTML content, where headings open a drawer to reveal content.
From a design or content perspective, accordions allow editors to add more content to the page while keeping the length of the page short, and reducing scroll.
When used effectively, 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. These determine whether or not visitors click to explore more content. Confusing or misleading headlines can be frustrating.
- Put valuable information in each section. Visitors expect to be rewarded with content every step of the way. If the information isn’t answering a question they would have, it shouldn’t be on our site.
- Do not put multiple links in an accordion. Users should never be asked to click twice for 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 will 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, the audience will 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