Accordions

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

Accordions are expandable sections of a web page.

• They show content when a user expands them by clicking on them.

• When they are not expanded, they show only a heading and a + icon.

Closed accordion

Open accordion

Supported content types

4 content types support accordions:

• Campaign

• Location

• Meeting

• Transaction

Accordions on a Campaign page

Accordions on a Transaction page

---

This guidance is adapted from the gov.uk Accordion component page.

When to use accordions

An accordion can work well if the user needs to reveal and compare information that’s relevant to them.

You can use an accordion when it’s helpful for the user to:

• 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

Test with users to decide if using an accordion outweighs the potential problems with hiding content.

When not to use accordions

Accordions hide content from the user. Not all users will notice them or understand how they work.

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

Add an accordion

Step 1

• Click on the plus sign icon under Additional content

• Select "Accordion section"

You'll see the following section appear once you add it:

Step 2

Optional: Give your Accordion section a title and add text to the sidebar. It will look like this on the frontend.

The title should describe the content in the accordions.

• Title of the Accordion section: up to 65 characters

• Accordion sidebar: up to 240 characters

Step 3

Give each accordion item a title and add your content to the body.

You can add text, a phone number, or an address to an item.

You can add more than 1 item under a title.