UltraCX - Accordion

Accordions are used to close up information that not everybody has to read. This is preferable to having multiple pages covering different aspects of the same thing. It also makes it easier to identify the main content of the page - usually a call to action or an answer to a common question.

UltraCX is a website template that’s been built specifically for the latest Squiz CMS (formerly Squiz Matrix) now part of the Squiz DXP.

Usage

Using accordions will allow users to:

  • view related sections of content quickly
  • choose which content isn’t relevant to them by showing or hiding sections.

Avoid these:

  • single accordions, unless
    • they describe a very uncommon situation
    • repeat information shown on multiple pages - eg contact details
    • they hide a large amount of optional information
  • accordions that only have a tiny bit of content in them
  • pages where all - or most - of the content is in accordions (an exception would be a page like this one where it's likely the user only want to view one design element at a time, and the accordions aid scanning and navigation).

Always test accordions with users first. Depending on what the user needs, hiding content could present problems.

Variants

The accordion has 2 variants:

  • default
  • numbered.

Content editors can also choose if accordions have their first item open by default.