Accordion

Description

The accordion content type is a list of up to five headings which when clicked can expand and collapse to easily reveal and hide additional content.

Available in zones:

  • Zone A

Permissions:

  • Available to all content editors

When to use it

Accordions should be used to help simplify and organize content in a way that makes the user experience better by preventing endless scrolling through tons of content. In that way, accordions can be especially helpful for mobile users.

However, if your content is already short, concise and easy to scan, then putting your content into an accordion may make your user experience more cumbersome instead. So use accordions thoughtfully.

The most important information for users should always be readily available on the page and not hidden in an accordion.

How to use it

Navigate to the section where you wish to add the accordion content item. Click "Create content" then select the "Accordion" content type.

Screen shot of how use the accordion content type 

Required fields

  • Name
    • The text in this field is for internal, informational purposes only, and appears in the list of 'content in this section.'
  • First Item Title
    • The "Item Title" is what users will click on to reveal and hide the content in the "Item Body."
  • First Item Body
    • The content in this HTML field is what will be hidden and revealed when users click on the Item Title.

Optional fields

  • Accordion Title
    • Optional title/heading for the accordion content item.
  • Second Item Title
  • Second Item Body
  • Third Item Title
  • Third Item Body
  • Fourth Item Title
  • Fourth Item Body
  • Fifth Item Title
  • Fifth Item Body

Other things to consider

Need more than five accordion items?

If you need more than five expandable/collapsible sections, then you can stack multiple accordion content types in a section.

Search engine optimization (SEO)

If you only put the most important keywords on your page hidden within in an accordion, they will be given less weight in calculating your page's SEO.

Important keywords used within the accordion should also be represented elsewhere on the page to have the greatest impact on your page's SEO ranking.

Find out more about what you can do in TerminalFour to increase your website's SEO.

Example Accordion