Accordions allow content owners to add more content to the page, while keeping the length of the page short and reducing scrolling for the user. When used effectively, accordions allow users to get the big picture before diving into more specific content.

On the flip side, accordions also hide content and can frustrate users by requiring additional clicks.

Each page should have no more than one accordion that is six levels or less deep. If accordions get deeper than that, the content for the page is likely too broad.

Use an accordion if users should pick and choose content. If only a few visitors need certain sections of content, accordions are perfect.

Do not use an accordion if the majority of visitors would read most or all of the content on your page to answer their questions.

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.
  • 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 Add Accordions

Accordion Example