Accordion

A stack of disclosure panels. Each row is a native <details>: its <summary> is the header that always shows, and the rest of the content appears when the row is open. The browser owns the open and closed state, so there is no JavaScript. Give the rows a shared name and opening one closes the others, or leave the name off and any number can stand open at once. Wrap the rows in a div class="accordion" to fuse them into one bordered unit.

<div class="accordion">
  <details name="faq">
    <summary>First question</summary>
    <p>…the answer, shown when this row is open…</p>
  </details>
  <details name="faq">
    <summary>Second question</summary>
    <p>…</p>
  </details>
</div>
Rows sharing one name: a single-open set

A single-open set

When every <details> carries the same name, the set behaves like radio buttons: opening a row closes whichever was open. Add open to the row you want showing on load.

How long does delivery take?

Standard orders arrive in three to five working days. The panel holds whatever the summary points to: text, a list, a table, another layout.

Can I change my address?

Yes, up until the order is packed. After that the parcel is with the courier and the address travels with it.

Do you ship overseas?

We ship anywhere with a postal code. Duties and taxes are settled on delivery.

<div class="accordion">
  <details name="ship" open>
    <summary>How long does delivery take?</summary>
    <p>…</p>
  </details>
  <details name="ship">
    <summary>Can I change my address?</summary>
    <p>…</p>
  </details>
  <details name="ship">
    <summary>Do you ship overseas?</summary>
    <p>…</p>
  </details>
</div>
Three rows sharing name="ship"; only one opens at a time

Independent panels

Drop the name and each row opens and closes on its own, so a reader can have several open together. The rows still join into one unit; only the single-open behaviour goes. Any content flows inside a row at the normal rhythm: here a list below a line of text.

Shipping

Everything about getting an order to the door.

Returns

Send anything back within thirty days for a full refund. What you need:

  • the order number
  • the items, unworn and tagged
  • the original packaging where you still have it
Warranty

Two years against manufacturing faults, from the delivery date.

<div class="accordion">
  <details open>
    <summary>Shipping</summary>
    <p>…</p>
  </details>
  <details>
    <summary>Returns</summary>
    <p>…</p>
    <ul>
      <li>the order number</li>
      <li>the items, unworn and tagged</li>
      <li>the original packaging where you still have it</li>
    </ul>
  </details>
  <details>
    <summary>Warranty</summary>
    <p>…</p>
  </details>
</div>
No name: rows open independently, several at once