Accordion

The accordion creates stacked sections of content and allows the user to expand/collapse them.

How to

The accordion component is used to condense related content sections by enabling the user to expand/collapse them. In other words, it's used to save space and group together related content.

If you want to allow multiple accordion items to be open at the same time, set data-multi-items="on" to the .js-accordion element (default is off).

The component includes the following custom properties:

:root {
  // general
  --accordion-border-width: 1px;
  --accordion-border-color: var(--color-contrast-low);
  // icon
  --accordion-icon-size: 1em;
  --accordion-icon-stroke-width: 2px;
}

Dynamic Content #

If your accordion component is created dynamically, you may need to initialize it (once it has been added to the page) to make it work properly.

Once the dynamic content has been added to the page, initialize it using the Accordion object:

// do this after your content has been added to the page
var accordion = document.getElementsByClassName('accordion')[0]; // your dynamically created accordion
new Accordion(accordion);

Deep Linking #

If you want to be able to share the link to a specific accordion panel, you can add the data-deep-link="on" attribute to the .js-accordion element:

<ul class="accordion js-accordion" data-deep-link="on">
  <!-- accordion content here -->
</ul>

Each time a new panel is selected, the hash of the page is updated with the panel id. 

Categories

• Data Display > Accordion

Bug report & feedback

Component Github page ↗