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.

Learn more: accordions »

 

What Do Accordions Look Like?

How to Create an Accordion

  1. While logged into the website, navigate to the page you want to edit.
  2. Click New Draft or Edit Draft.
  3. Scroll down to the location where you want to add your accordion. Click the blue plus [+] symbol, then choose Accordion from the menu
  4. Check the “Display closed” box if you want your first accordion element to appear closed the first time a user sees it
  5. Give the first accordion element a title
  6. Then, under “sub wrapper”, click the content element you would like to add (usually "Add Text")
  7. Add and style your content in the content window
  8. 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.
  9. When you're finished adding accordion elements, click Save
  10. Scroll to the bottom of the page and click the Save and Create New Draft or Save and Publish button