Awesome Accordions website

When to use an Accordion

Before you start using an accordion think about the advantages and disadvantages of this pattern.  The best place to start when deciding to use an accordion is to evaluate common and critical use cases for your audience. Understanding people’s scenarios will help you determine whether or not accordions are appropriate. Some of the most important considerations are listed below:

Here’s a short checklist for you to decide if the accordion is the pattern to use:

  • The user only needs to view one panel at a time 
    The nature of an accordion pattern makes it difficult to compare content across the different panels (since most of the content is hidden)
  • The user is not expected to read all the content on the page
    If you need a user to read all of the content then don’t use an accordion, just let them scroll past the text without having them to interact with panels. Useful for long pages with paragraphs and headers which might not be interesting for all users
  • The content is closely related to one another
    Do not group unrelated items in one accordion, they need to have a common theme / topic