The accordion component lets users show and hide sections of related content on a page.  

The component loads with all sections hidden. To show a section, the user can interact anywhere in the heading button.   

When to use this component

Use an accordion to help users: 

• see an overview of multiple, related sections of content 

• choose to show and hide sections that are relevant to them 

• look across information that might otherwise be on different pages 

For example, an accordion can work well if the user needs to reveal and compare information that’s relevant to them. 

When not to use this component

Accordions hide content from the user. Not all users will notice them or understand how they work. For this reason, you should only use them in specific situations and if user research supports it. 

Do not use an accordion for content that all users need to see. 

Test your content without an accordion first. Well-written and structured content can remove the need to use an accordion. 

It’s usually better to: 

• simplify and reduce the amount of content 

• keep the content on a single page, separated by headings 

• use a list of links at the start of the page (known as ‘anchor links’) to take the user to particular sections of a page 

Accordions work best for simple content and links. Do not use accordions to split up a series of questions. Use separate pages instead. 

Do not put accordions within accordions, as it will make content difficult to find. 

Example of where we have used this component

This component is used on: 

• Public-facing website 

• Pocketbook 

This list is not exhaustive.  

Status of development

The below criteria all need to be met for a component to be considered as fully developed for use within the ASP Digital Design System.