Accordion (old version)

This pattern is no longer supported

This old method of implementing the accordion pattern is deprecated and will be removed in a future version of the digital pattern library. Please refer to the current accordion pattern for the correct method.

The accordion pattern presents an expandable and collapsible section of content. Accordions shorten pages and reduce scrolling, but they require users to click on topic headings to find information. Therefore, accordions should be used sparingly. For more information see the Nielsen Norman Group report on accordion usability.

Rules for accordions

  • Must not be used when your audience needs most or all of the content on the page to answer their questions. It is better to show all page content at once when the user case supports it. In such cases, do not worry about page length.
  • May be used when only one option is relevant to the user e.g. UK, Europe, USA.
  • May be used where you want to step a user through a process e.g. step 1, step 2, step 3.
  • The content within accordions must not contain any headings.
  • May be used anywhere in a content section.

Options available

Single accordion - deprecated

This option is no longer supported

This implementation is now deprecated and will be removed in a future release.

Consider if the content would be better visible at all times before using a single accordion to hide it from the user.

Example
Code

Multiple accordions - deprecated

This option is no longer supported

This implementation is now deprecated and will be removed in a future release.

Example
Code