Accordion

Width 375 768 Full Open in a tab

The classes below, on plain markup, in their own document — so what you are looking at is core's stylesheet and nothing else.

The markup

<div class="aparte-accordion">
  <details class="aparte-accordion__item" open>
    <summary class="aparte-accordion__header">
      Shipping
      <aparte-icon name="expand"></aparte-icon>
    </summary>
    <div class="aparte-accordion__panel">Free above 50 €, otherwise 4,90 €. Two to four working days.</div>
  </details>
  <details class="aparte-accordion__item">
    <summary class="aparte-accordion__header">
      Returns
      <aparte-icon name="expand"></aparte-icon>
    </summary>
    <div class="aparte-accordion__panel">Thirty days, in the original packaging.</div>
  </details>
  <details class="aparte-accordion__item">
    <summary class="aparte-accordion__header">
      Payment
      <aparte-icon name="expand"></aparte-icon>
    </summary>
    <div class="aparte-accordion__panel">Card, PayPal, or an invoice for a company account.</div>
  </details>
</div>

Stacked disclosures

A column of items, each a header you press and a panel it reveals. The header works as a native <summary> inside <details> OR as a <div role="button" aria-expanded> — that choice decides whether the open state is the browser’s or yours, and the CSS does not care either way. It is the whole clickable row, so it takes the same reset a button does.

The chevron turns 180° when the item is open, and there are two selectors for it because there are two ways to be open: aria-expanded on the header for the ARIA pattern, details[open] on the ancestor for the native one. Nothing here opens or closes anything — this is a stylesheet, and the disclosure is the element’s job or yours.

Classes

.aparte-accordion · .aparte-accordion__header · .aparte-accordion__icon · .aparte-accordion__item · .aparte-accordion__panel · .aparte-icon

The tokens these read are on the CSS variables reference; every class of the kit, on one page, is the classes reference.