Accordions

Accordions are components that allow sections of content to be vertically displayed on a page. The header for each section controls if that content is expanded or collapsed.

Key Points

Every accordion should have a clear header that identifies what content is collapsed and hidden

Accordions can have one or no accordion content open on first page load

Accordions should be able to be opened by default if they are triggered by a deep link

Usage

The accordion component makes it possible to display large amounts of content in a small space through controlled disclosure. Whilst this adds an extra click to the user finding content it keeps related content together and the header will provide key navigation.

Card and Accordion

Example of an accordion nested inside an card

Accordions can be placed on a page or inside other components such as a card. Be aware that the overall height of the page or container will change depending on the section(s) which are opened.

Accordion on a Page

Example of an accordion on a page background

Behaviour

To keep content related within their container the following two changes happen:

When the accordion is open the arrow icon points up, the icon down when collapsed

The divider line stays at the bottom of each section when expanded, this differentiates each section

The whole header section should be tappable to trigger the expance/collapse action.

File Links

Web Component

Web Accordion component