Accordion

Accordions are useful when you want to toggle between hiding and showing large amount of content.

ATTENTION We use the HTML details disclosure element for this component, for more information read the here.

The following code examples shows how to use accordions:

<div class="accordion">

  <details class="accordion__item">
    <summary class="accordion__trigger">
      <div class="accordion__label">Label 01</div>
      <div class="accordion__icon"><span class="icon icon--arrow-down"></span></div>
    </summary>
    <div class="accordion__content">Content 01</div>
  </details>

  <details class="accordion__item">
    <summary class="accordion__trigger">
      <div class="accordion__label">Label 02</div>
      <div class="accordion__icon"><span class="icon icon--arrow-down"></span></div>
    </summary>
    <div class="accordion__content">Content 02</div>
  </details>

  <!-- ... -->
</div>

The following list describe all existing block/element/modifier classes of the component and all data attributes.

• .accordion - required the block that represent the accordion component and contains all elements, should be a <div>
• .accordion__item - required a single item represent on clickable label and a related content, must be a <details>
• .accordion__trigger - required this is the clickable element, for open/close the content, must be a <summary>
• .accordion__label - required contains a inline text, that is used as representative label for the related content
• .accordion__icon - required this element must only contain <span class="icon icon--arrow-down"></span>, the icon will show if the accordion item is open or closed
• .accordion__content - required this contains the content of the item
• .accordion__item[open] - if the [open] attribute is initial set to the item, the related content will show by page load
• Modifier
  • .accordion--toggler - Change the behavior of the accordion, while opening a content, all other contents will closed
  • .accordion--only-{SCREEN_SIZE} - this modifier shows the content of an accordion items only on the named screens as an accordion, on other screen sizes it shows only the content

The variables are:

• SCREEN_SIZE xl, lg, md, sm, xs

Basic Example:

Initial Open Item

When you add the attribute [open] to an .accordion__item, then item will opened even on page load.

Modifier

The component can be customized using class modifiers.

Toggler

With the modifier .accordion--toggler that will append to the .accordion block you can change the behavior of the accordion. While opening a content, all other contents will close.

Only on Screen

The modifier .accordion--only-xs, .accordion--only-sm, .accordion--only-md, .accordion--only-lg and .accordion--only-xl shows the content of a accordion items only on the named screens.

ATTENTION The open/close handling is managed by JavaScript and can create Content Shifts on page load.