Accordions – when to use them

Accordions – when to use them

Accordions – when to use them

Accordions are a perfect way of making content heavy pages appear less daunting. Find out exactly what accordions are and learn how to add them to your own webpage.

Does the word accordion make you think of something like this:

So why on earth would you want one on your webpage? Well in the world of Squiz, accordions look more like this:

They are menus used to order content. These vertically stacked lists of items can each be expanded or opened to reveal the detailed content associated within that item. They work a bit like the musical instrument where they can be compact and then expanded – see the resemblance?

When should you use accordions?

If you’ve got a lot of content, accordions can be used to help organise it. They are most suitable when people need only a few key pieces of content on a single page. This allows website visitors to have control over the content by expanding the sections they need and letting them decide what they can skip.

Things to keep in mind when using accordions:

  • choose your accordion name carefully so that people know what to expect when they expand the content and don’t end up finding unrelated information.
  • don’t use accordions if users need to read all/most of the subsections anyway.
  • avoid making people jump between sections unnecessarily. Every time you refer to content in a different accordion, your user has to open another section. If your content demands this, it’s a better to have a long page with a clear heading structure so that it is easier to scan without having to click.
  • to reduce page loading times, limit the number of accordions to no more than three to four per page.

Adding an accordion to your page:

Follow the five steps below to add an accordion to your page.

1. On your page's Content screen, click on the Insert New Container icon.

2. In the pop-up box, make sure that the Presentation value is set to: Block level and then set the CSS class to: accordion.

*Note – the CSS class is case sensitive so be sure to use ‘accordion’ and not ‘Accordion’.

3. Click Insert

4.Add a heading to the new accordion Content Container. When someone visits the page, this heading will be converted into the accordion title.

5. Save all the changes

Repeat the above process for each accordion that you wish to add to your page.

Note: If you would prefer the accordion to be 'expanded' (open) by default when the user visits the page, then add the class: is-active to the Content Container. That is; set the CSS class to: accordion is-active.

Note: You can have multiple headings in the accordion content - only the first heading will be converted into the accordion title.

Back to the top of this page