'Accordion/Disclosure' component

Introduction

The accordion component lets users show and hide sections of related content on a page, to simplify the interface where necessary.

Anatomy

Key Content  

*Icons used for controls are not specifically ‘content’ as they aren’t content editable - but would be defined within brand-specified icons.

*Sometimes lists are only a portion of a full list and are continued elsewhere. If a content model for a list includes a reference to the “full list” it may result in a CTA to view more being presented.

Editorial 

• Keep accordion titles short, but long enough to clearly communicate what a user can expect to find inside. This is especially required for unsighted users.

Visual Style 

Accordions come in a few style options (beyond the standard colour theming). The two main visualizations of accordions are the (default) accordion and the subtle accordion.

Subtle accordion

Subtle accordion style is visually less prominent by reducing size and removing borders. Subtle accordions will generally be restricted to a single draw and is used to house peripheral content that isn’t relevant to all users. Two examples of this are product ingredient pack details and video transcripts.

Behaviour 

• Accordion items are collapsed by default.

• Each accordion is individually controlled with a toggle between expanded and collapsed.

• Each accordion includes hover, focus and disabled and active states. CSS ‘focus-visible’ will remove visual focus for mouse-controlled accordions.

• Mouse click or touch on the accordion title will toggle between expand and collapse.

• Once focused, Enter or Space on a keyboard will toggle expand or collapse.

• Items within an accordion ‘list’ can be traverse forwards with tab and backwards with shift+tab.

• Where Javascript is disabled, all accordions are expanded by default and expand/collapse controls are not present.

Usage

Do’s

• Use accordion when you have multiple related pieces of content.

• Use accordion when only some of the content items are relevant to any one user. FAQs are a great example as not all questions are of interest to everyone.

Don’ts

• Don’t use accordion when content is relevant to all users.

• Don’t use accordion when content within the accordion is very complex or can cause slow page loads.

Analytics & Data 

• Accordion titles and panels must be able to be individually selected to be used as click triggers within Google Tag Manager to track usage and visibility of content.

• Google structured snippets and schema FAQ.

Related/Similar Components 

• Disclosure

• Table of Contents

• Tabs