Using Accordions

An accordion is a menu composed of vertically stacked headers that reveal more details when their panels are opened. The critical information appears in the header, while the supplemental information is easily accessible. Accordions are a valuable tool for organizing and simplifying complex web pages into digestible chunks. They are also ideal for mobile devices since they reduce how much a user has to scroll.  

Common Use Cases

Use accordions effectively to: 

• Enhance user experience and facilitate efficient navigation by letting users read what they want, when they want—Using allows separate audiences visiting the same page to sort through information that doesn't apply to them 
  Example: On the Swimming Pool Permits page, there could be three different audiences depending on the type of the pool, which equates to three different sets of required documents. Users can expand the section that applies to the permit/pool type of interest.
• Feature multiple subtopics under the same main topic without having to create an completely new web section (Example: Watersheds Page)
• Help reduce the amount of information presented to users 
• Maintain the focus of a user's attention by reducing clutter, confusion and cognitive workload

Things to Consider 

When implementing accordions, consider potential drawbacks and make informed decisions based on: your audience's needs and the nature of the content being presented. 

• Your audience's needs: 
  • Do accordions help users find answers to their questions more efficiently? 
  • Do these users need only a few pieces of information on the page?  
  • Will there be more than one audience viewing the information on the page? 
• The specific content you're presenting: 
  • Does the content structure lend itself well to accordion-style presentation?  
  • Are there alternative navigation tools or design patterns?  
• Ensure that the heading accurately reflects the content within the panel. Headings and titles must be descriptive enough to inform users of the nature of the section’s content without them having to open it. 
• Images are acceptable in accordions if they have alternative text. 

When to Use Accordions

• If the information in each section is independent and users are unlikely to need simultaneous access to multiple sections, accordions can help them quickly access only the section of interest. 
• When the content is long and the window size is small, which is especially relevant on mobile devices, using accordions helps prioritize content display and reduce the page length.  

When to Avoid using accordions

• When your audience requires the majority or all the content on the page to find answers to their questions, show all the content at once. In this case, easy access to essential information matters more than reduced page length. 
• When there is little content on the page, accordions will make the page look mostly empty. The absence of content can cause the illusion that there is no valuable information on the page and prompt users to abandon the page. 
• When the content has a deep hierarchy with multiple sublevels, it can be too complex to be displayed in a flat-hierarchy format like accordions. Users may feel confused and lose track of where they are within the accordion structure.  
• If users will need to open the majority of the accordions to see the information they need. Displaying all the content at once is preferable, since scrolling down the page is easier than deciding which heading to click on. Hiding content behind navigation can reduce people's awareness of it since an additional step is required to access the information.
• When the content is scattered and difficult to summarize or chunk. 
• When users are likely to be immersed in a continued flow of reading.