Accordion

An accordion is a vertical list of headers, users interact to reveal or hide content within them. They reduce page length and scrolling.

Example of an accordion

We share our love of the historic environment to inspire and energise people

We listen and learn, and pass on this knowledge to others

We work with partners and we work together to achieve great things

We communicate in a way that’s understandable, available and useful to everyone

We are accountable to the public and we always act with integrity

How it works

At its most granular form an accordion can be broken down into an individual component. This can be referred to as an accordion item. This is made up of an accordion item question and header.

Accordion items within a group of accordions have three different states; collapsed, hover and expanded.

Collapsed state: The title should be clearly identifiable in bold with the arrow pointing down, showing the direction that content will expand.

Hover state: Interacting with the component triggers the hover state. On hover, the title and arrow will turn red in colour.

Expanded state: The content panel has expanded showing content. The title should be clearly identifiable in bold with the arrow pointing up, the direction that content will collapse.

Intended purpose

These must be applied for the most suitable and consistent experience:

  • An accordion must always expand information below the title.