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
When to use this component
Use this component to:
- Breakdown longform or complex content into digestible chunks
- Only use the component when it’s useful for the user to see an overview of related content together
- You know all sections will not be beneficial to everyone, so it’s best that they choose which information to open and hide.
When to not use the component
- Never hide important content or content that most users will require
- Do not put two sets of accordions on top of each other.
- Do not overuse the amount of tabs in the accordion – recommended 10
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.