Accordion

The Accordion list a vertically stacked list of headers that reveal or hide associated sections of content.

Overview

Definition

An accordion is a vertically stacked list of headers that reveal or hide associated sections of content.
It is used to put long sections of information under a block that users can expand or collapse.
Accordions decrease cognitive load by letting people choose which sections of content they see, like questions in an FAQ.

Common usage

When to use

To organize related information into sections.
To shorten pages and reduce scrolling when content is not crucial to read in full.
When space is at a premium and long content cannot be displayed all at once, like on a mobile interface or in a side panel.
To prioritize essential information while still providing access to additional details for those who need it.

When not to use

Displaying links pointing to sections of the same page.
Never put information that's required for the current task inside an accordion. Consider a treatment that gives it more prominence.
If a user is expected to read all of the content.

General guidance

Accessibility guidance

Enable keyboard interactions with accordion:

tab to switch between accordion items
When the accordion item is in focus, space or enter to expand or collapse the accordion item
Interactive elements (such as a link or button) within an expanded accordion item integrate into the tab order by default

Content guidance

Title should be as brief as possible
If title is too long it can be wrapped to the next line
Content inside of a section may be split into paragraphs

Accordion vs Stepper

To guide users through a process use a Stepper instead.

Accordion vs Expandable section

If the information inside each section is not related to each other but can be accessed by users who want more context or clarification. (e.g. unrelated sections on order details page such as Account details, Shipping details etc.).

Main rules

Follow the QDS hierarchical structure for embedded content.
Use accordion types for specific hierarchy levels.
Accordion width may vary and depends on the place where it's used

Accordion Item

Accordion Item is a component that must be a direct child of the Accordion component. You can include as many Accordion Items as you like and specify the necessary properties for each one.

Properties

`is-open`

If this property is set to true, the Accordion Item will be open by default.

Live Editor

<qds-web-accordion layer="main" level="section">
  <qds-web-accordion-item text="This is a main section accordion">
    Incididunt Lorem ea commodo veniam. Id velit labore qui laboris enim aliquip
    enim ipsum nulla. Tempor ullamco duis excepteur qui labore quis culpa labore
    minim ex dolor ad. Aliqua pariatur anim fugiat nulla non. Labore labore esse
    enim quis reprehenderit exercitation consectetur occaecat. Non mollit dolor
    et exercitation ipsum. Occaecat do aute elit non ut sit irure sunt esse.
  </qds-web-accordion-item>
  <qds-web-accordion-item
    is-open="true"
    text="This is a main section accordion"
  >
    Incididunt Lorem ea commodo veniam. Id velit labore qui laboris enim aliquip
    enim ipsum nulla. Tempor ullamco duis excepteur qui labore quis culpa labore
    minim ex dolor ad. Aliqua pariatur anim fugiat nulla non. Labore labore esse
    enim quis reprehenderit exercitation consectetur occaecat. Non mollit dolor
    et exercitation ipsum. Occaecat do aute elit non ut sit irure sunt esse.
  </qds-web-accordion-item>
</qds-web-accordion>

`text`

The text which will show as the accordion item title

`divider`

Control whether to display the bottom divider line or not, which can be useful when using the accordion in the filtering panel use case.

Live Editor

<qds-web-accordion layer="main" level="section">
  <qds-web-accordion-item
    divider="false"
    text="This is a main section accordion"
  >
    Incididunt Lorem ea commodo veniam. Id velit labore qui laboris enim aliquip
    enim ipsum nulla. Tempor ullamco duis excepteur qui labore quis culpa labore
    minim ex dolor ad. Aliqua pariatur anim fugiat nulla non. Labore labore esse
    enim quis reprehenderit exercitation consectetur occaecat. Non mollit dolor
    et exercitation ipsum. Occaecat do aute elit non ut sit irure sunt esse.
  </qds-web-accordion-item>
  <qds-web-accordion-item
    divider="false"
    text="This is a main section accordion"
  >
    Incididunt Lorem ea commodo veniam. Id velit labore qui laboris enim aliquip
    enim ipsum nulla. Tempor ullamco duis excepteur qui labore quis culpa labore
    minim ex dolor ad. Aliqua pariatur anim fugiat nulla non. Labore labore esse
    enim quis reprehenderit exercitation consectetur occaecat. Non mollit dolor
    et exercitation ipsum. Occaecat do aute elit non ut sit irure sunt esse.
  </qds-web-accordion-item>
</qds-web-accordion>

Layer and level

The layer and level properties set the [layer][] and [level][] to which the accordion belongs. By default, the layer property is set to main and the level property is set to section

Live Editor

<qds-web-accordion>
  <qds-web-accordion-item text="This is a main section accordion">
    Incididunt Lorem ea commodo veniam. Id velit labore qui laboris enim aliquip
    enim ipsum nulla. Tempor ullamco duis excepteur qui labore quis culpa labore
    minim ex dolor ad. Aliqua pariatur anim fugiat nulla non. Labore labore esse
    enim quis reprehenderit exercitation consectetur occaecat. Non mollit dolor
    et exercitation ipsum. Occaecat do aute elit non ut sit irure sunt esse.
  </qds-web-accordion-item>
</qds-web-accordion>

The accordion component is designed for two levels:

section
subsection

Depending on your content hierarchy, accordion can be used for Main, Panel and Popup layers

Live Editor

<qds-web-accordion layer="panel" level="subsection">
  <qds-web-accordion-item text="This is a panel subsection accordion">
    Incididunt Lorem ea commodo veniam. Id velit labore qui laboris enim aliquip
    enim ipsum nulla. Tempor ullamco duis excepteur qui labore quis culpa labore
    minim ex dolor ad. Aliqua pariatur anim fugiat nulla non. Labore labore esse
    enim quis reprehenderit exercitation consectetur occaecat. Non mollit dolor
    et exercitation ipsum. Occaecat do aute elit non ut sit irure sunt esse.
  </qds-web-accordion-item>
</qds-web-accordion>

Live Editor

<qds-web-accordion layer="popup" level="section">
  <qds-web-accordion-item text="This is a popup section accordion">
    Incididunt Lorem ea commodo veniam. Id velit labore qui laboris enim aliquip
    enim ipsum nulla. Tempor ullamco duis excepteur qui labore quis culpa labore
    minim ex dolor ad. Aliqua pariatur anim fugiat nulla non. Labore labore esse
    enim quis reprehenderit exercitation consectetur occaecat. Non mollit dolor
    et exercitation ipsum. Occaecat do aute elit non ut sit irure sunt esse.
  </qds-web-accordion-item>
</qds-web-accordion>

See the table of [allowed layer/level combinations][] to see how

these properties can be combined. :::

Restrictions

Section level should not be used with titles. Use subsection level instead.

Anatomy

Responsive

Accordion component is designed for 2 platforms:

desktop – 1280 px and higher
mobile (includes tablet) – 360 px to 767 px

Layout

Accordion can be placed with main page content or placed inside of a container such as side panel or popup.

Implementation tips

Setting HTML heading level

As recommended by the web standards, the <h1>-<h6> tags should be used to describe the semantic structure of the document, not to set visual styles of the headings.

The qds-accordion component enables this good practice by decoupling the visual hierarchy, defined by its layer and importance properties, from the semantic structure, defined by its tag property:

In the following example, as there is only one section on the screen, that section can use the h1 level, and its subsections can use the h2 level:

Live Editor

<div class="qds-main-section qds-related items-stretch">
  <qds-title layer="main" level="section" tag="h1">
    The unique section uses a h1 heading
  </qds-title>
  <div class="flex flex-row qds-related">
    <div class="qds-main-subsection flex-1">
      <qds-web-accordion level="subsection" tag="h2">
        <qds-web-accordion-item text="This subsection uses a h2 heading">
          Velit nulla tempor quis cillum consequat laboris ut aute magna anim
          anim voluptate cillum Lorem. Nostrud nulla nisi esse occaecat. Eiusmod
          enim velit velit ipsum et nostrud officia. Reprehenderit amet eiusmod
          consectetur dolor anim amet sit. Sunt minim dolor qui quis proident
          sint est officia aute veniam.
        </qds-web-accordion-item>
      </qds-web-accordion>
    </div>
    <div class="qds-main-subsection flex-1">
      <qds-web-accordion level="subsection" tag="h2">
        <qds-web-accordion-item text="This subsection uses a h2 heading">
          Incididunt Lorem ea commodo veniam. Id velit labore qui laboris enim
          aliquip enim ipsum nulla. Tempor ullamco duis excepteur qui labore
          quis culpa labore minim ex dolor ad. Aliqua pariatur anim fugiat nulla
          non. Labore labore esse enim quis reprehenderit exercitation
          consectetur occaecat. Non mollit dolor et exercitation ipsum. Occaecat
          do aute elit non ut sit irure sunt esse.
        </qds-web-accordion-item>
      </qds-web-accordion>
    </div>
  </div>
</div>

In that other example, there are two sections on the screen, so they should use the h2 level, while their subsections use the h3 level:

Live Editor

<div class="qds-main">
  <div class="qds-main-section qds-related items-stretch">
    <qds-title layer="main" level="section" tag="h2">
      This first section uses a h2 heading
    </qds-title>
    <div class="flex flex-row qds-related">
      <div class="qds-main-subsection flex-1">
        <qds-web-accordion level="subsection" tag="h3">
          <qds-web-accordion-item text="This subsection uses a h3 heading">
            Incididunt Lorem ea commodo veniam. Id velit labore qui laboris enim
            aliquip enim ipsum nulla. Tempor ullamco duis excepteur qui labore
            quis culpa labore minim ex dolor ad. Aliqua pariatur anim fugiat
            nulla non. Labore labore esse enim quis reprehenderit exercitation
            consectetur occaecat. Non mollit dolor et exercitation ipsum.
            Occaecat do aute elit non ut sit irure sunt esse.
          </qds-web-accordion-item>
        </qds-web-accordion>
      </div>
      <div class="qds-main-subsection flex-1">
        <qds-web-accordion level="subsection" tag="h3">
          <qds-web-accordion-item text="This subsection uses a h3 heading">
            Incididunt Lorem ea commodo veniam. Id velit labore qui laboris enim
            aliquip enim ipsum nulla. Tempor ullamco duis excepteur qui labore
            quis culpa labore minim ex dolor ad. Aliqua pariatur anim fugiat
            nulla non. Labore labore esse enim quis reprehenderit exercitation
            consectetur occaecat. Non mollit dolor et exercitation ipsum.
            Occaecat do aute elit non ut sit irure sunt esse.
          </qds-web-accordion-item>
        </qds-web-accordion>
      </div>
    </div>
  </div>
  <div class="qds-main-section qds-related items-stretch">
    <qds-title layer="main" level="section" tag="h2">
      This second section uses a h2 heading
    </qds-title>
    <div class="flex flex-row qds-related">
      <div class="qds-main-subsection flex-1">
        <qds-web-accordion level="subsection" tag="h3">
          <qds-web-accordion-item text="This subsection uses a h3 heading">
            Incididunt Lorem ea commodo veniam. Id velit labore qui laboris enim
            aliquip enim ipsum nulla. Tempor ullamco duis excepteur qui labore
            quis culpa labore minim ex dolor ad. Aliqua pariatur anim fugiat
            nulla non. Labore labore esse enim quis reprehenderit exercitation
            consectetur occaecat. Non mollit dolor et exercitation ipsum.
            Occaecat do aute elit non ut sit irure sunt esse.
          </qds-web-accordion-item>
        </qds-web-accordion>
      </div>
      <div class="qds-main-subsection flex-1">
        <qds-web-accordion level="subsection" tag="h3">
          <qds-web-accordion-item text="This subsection uses a h3 heading">
            Incididunt Lorem ea commodo veniam. Id velit labore qui laboris enim
            aliquip enim ipsum nulla. Tempor ullamco duis excepteur qui labore
            quis culpa labore minim ex dolor ad. Aliqua pariatur anim fugiat
            nulla non. Labore labore esse enim quis reprehenderit exercitation
            consectetur occaecat. Non mollit dolor et exercitation ipsum.
            Occaecat do aute elit non ut sit irure sunt esse.
          </qds-web-accordion-item>
        </qds-web-accordion>
      </div>
    </div>
  </div>
</div>

Importing

Note: if you're using the lazy loader to load Quartz components, you can ignore this section.

Import
Bundler
Angular
React
Vue

To import this component from the public jsDeliver CDN using a JavaScript import:

import { defineCustomElementQdsWebAccordion } from 'https://cdn.jsdelivr.net/npm/@quartzds/websites@next+esm'
defineCustomElementQdsWebAccordion()

To import this component using a bundler:

import { defineCustomElementQdsWebAccordion } from '@quartzds/websites'
defineCustomElementQdsWebAccordion()

To import this component as an Angular component:

import { QdsWebAccordion } from '@quartzds/websites-angular'

To import this component as a React component:

import { QdsWebAccordion } from '@quartzds/websites-react'

To import this component as a Vue component:

import { QdsWebAccordion } from '@quartzds/websites-vue'

Slot

The content of the Accordion Item component is put inside a slot. The Accordion component must contain at least one Accordion Item component as slot.

All logic is handled automatically; you only need to specify the necessary properties for the accordion and each accordion item.

Component reference

Properties

Accordion Item

Attribute / Property

Type

Description

Default

is-open / isOpen

boolean

Accordion initial state

false

text

string

The accordion item's title.

undefined

Accordion

Attribute / Property

Type

Description

Default

layer

"main" | "panel" | "popup" | undefined

The accordion's layer. If defined at the accordion level, it will cascade to all accordion items.

undefined

level

"section" | "subsection" | undefined

The accordion's level. If defined at the accordion level, it will cascade to all accordion items.

undefined

tag

"h1" | "h2" | "h3" | "h4" | "h5" | "h6" | undefined

The accordion item title tag. If defined at the accordion level, it will cascade to all accordion items.

undefined

Overview​

Definition​

Common usage​

When to use​

When not to use​

General guidance​

Accessibility guidance​

Content guidance​

Accordion vs Stepper​

Accordion vs Expandable section​

Main rules​

Accordion Item​

Properties​

is-open​

text​

divider​

Layer and level​

Overview

Definition

Common usage

When to use

When not to use

General guidance

Accessibility guidance

Content guidance

Accordion vs Stepper

Accordion vs Expandable section

Main rules

Accordion Item

Properties

`is-open`

`text`

`divider`

Layer and level