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.

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.

Can I change my address?

Yes, up until the order is packed.

Do you ship overseas?

We ship anywhere with a postal code.

<div class="accordion">
  <details name="ship" open>
    <summary>How long does delivery take?</summary>
    <p>Standard orders arrive in three to five working days.</p>
  </details>
  <details name="ship">
    <summary>Can I change my address?</summary>
    <p>Yes, up until the order is packed.</p>
  </details>
  <details name="ship">
    <summary>Do you ship overseas?</summary>
    <p>We ship anywhere with a postal code.</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. What you need:

  • the order number
  • the items, unworn and tagged
Warranty

Two years against manufacturing faults.

<div class="accordion">
  <details open>
    <summary>Shipping</summary>
    <p>Everything about getting an order to the door.</p>
  </details>
  <details>
    <summary>Returns</summary>
    <p>Send anything back within thirty days. What you need:</p>
    <ul>
      <li>the order number</li>
      <li>the items, unworn and tagged</li>
    </ul>
  </details>
  <details>
    <summary>Warranty</summary>
    <p>Two years against manufacturing faults.</p>
  </details>
</div>
No name: rows open independently, several at once