Version: next

Accordion

Since v1.0.0

Accordions toggle the visibility of content.

For avoiding to add a script, the open/close behavior is direclty managed from the <details> element.
By adding the open attribute on the main element, the component will be opened by default.

<details class="c-accordion u-mb-2" open>
  <summary class="c-accordion__header">Section 1</summary>
  <div class="c-accordion__body">
    <ul class="o-list-bare u-mb-0">
      <li class="u-py-1 u-pl-3"><a href="#">Subsectionn 1.1</a></li>
      <li class="u-py-1 u-pl-3"><a href="#">Subsectionn 1.2</a></li>
      <li class="u-py-1 u-pl-3"><a href="#">Subsectionn 1.3</a></li>
    </ul>
  </div>
</details>
<details class="c-accordion u-mb-2">
  <summary class="c-accordion__header">Section 2</summary>
  <div class="c-accordion__body">
    <ul class="o-list-bare u-mb-0">
      <li class="u-py-1 u-pl-3"><a href="#">Subsectionn 2.1</a></li>
      <li class="u-py-1 u-pl-3"><a href="#">Subsectionn 2.2</a></li>
      <li class="u-py-1 u-pl-3"><a href="#">Subsectionn 2.3</a></li>
    </ul>
  </div>
</details>
<details class="c-accordion">
  <summary class="c-accordion__header">Section 3</summary>
  <div class="c-accordion__body">
    <ul class="o-list-bare u-mb-0">
      <li class="u-py-1 u-pl-3"><a href="#">Subsectionn 3.1</a></li>
      <li class="u-py-1 u-pl-3"><a href="#">Subsectionn 3.2</a></li>
      <li class="u-py-1 u-pl-3"><a href="#">Subsectionn 3.3</a></li>
    </ul>
  </div>
</details>

The accordion module also can be combined with other component, like the card for example:

We have a super answer for you!

Install the package and try by yourself 😉

<details class="c-card c-accordion u-mb-3">
  <summary class="c-card__header c-accordion__header u-py-2">
    You have a question?
  </summary>
  <div class="c-card__body c-accordion__body">
    We have a super answer for you!
  </div>
</details>