The site is not yet optimised for mobile viewing. Please view on screens wider than 768px like your desktop screen.

Accordion

Accordions are a list of headings that are clicked on to reveal and then hide additional content.

The use of an accordion may benefit long pages by reducing the need for too much scrolling.

Best practice

When to use:

  • Users only need a few specific pieces of content within a page.
  • Information needs to be displayed in a small space.
  • If visitors need to see most or all of the information on a page use well-formatted text instead.
  • If there is not enough content to warrant hiding content avoid using accordions as they increase cognitive load and interaction cost because users have to make decisions about what headers to click on.

Accessibility

  • Hover state should indicate a link (text underline) and show clear contrast between the collapsed (hidden) and expanded states (e.g. background colour). (WCAG 2.0 Level A - SC 1.4.1)
  • Text colour must have adequate contrast from the background color.
  • Users must be able to tab through the accordion, using the return key to expand and collapse each panel.

Alternative UI modules

Accordion

Usage

Accordions should be used when users only need key pieces of information from a page, or information needs to be displayed in a small space.

Definition

Example

Accordion simple

Code samples

Desktop
  • Panel headings: Avenir Heavy, Arial, sans-serif; bold; 1.5em; $charcoal--120.
  • Active (expanded) chevron icon: Up 2.
  • Inactive (collapsed) chevron icon: Down 2.
  • Hover: text underlined; background colour: $black--20. The whole header tab should be clickable not just the heading text.
  • Panel content: Font: Avenir Heavy, Arial, sans-serif; normal; 1.4em; $charcoal--120.
  • Border: $black--40; 1px.
Mobile
  • Panel heading: 1.4em.

Forthcoming...

Forthcoming...

Example in action

Accordion (see 'If you need assistance with fees')

Accordion with icons

Usage

Use the Accordion with icons when you feel each tab or heading needs icons to assist user scanning or there are a lot tabs which could do with some visual decoration. Choose icoms which enhance the tab ehading in terms of user scanning and understanding.

Definition

Example

Accordion with icons