Accordion

Preview Code

375 768 Full

Open

html

<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>

A column of items, each a header and the panel it reveals. The header can be a native <summary> inside <details>, and then the browser opens and closes it, or a <div role="button" aria-expanded>, and then your code does. The chevron turns when the item is open, either way. The chat’s reasoning block is an accordion item on <details>.

Customize

It reads only the theme’s shared tokens, listed on the CSS variables reference.

Classes

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

Accessibility

• <details> and <summary> need nothing more: they are keyboard-operable and announce whether they are open.
• With role="button", keep aria-expanded in step with the panel, and make the header focusable with tabindex="0" and Enter or Space.

Related

• Tabs — one section at a time, side by side.
• Reasoning — a disclosure in a reply.