Skip to content

role disclosure

Accordion draft v0.1.0

A stack of sections whose content shows and hides under a header people activate.

An accordion stacks sections of content, each behind a header: activating the header shows the section, activating it again hides it. It saves vertical space when people need only one or two sections at a time (settings groups, frequently asked questions, order details). Several sections may be open at once; the component never closes one when another opens. One section alone is the same thing with a single item.

Playground

JSON array of item entries ("part": "item" for a item).

Shipping and returns

Orders ship within two business days. Returns are free within 30 days.

Payment methods

We accept cards, bank transfers and most digital wallets.

Warranty

Every product is covered for two years from the delivery date.

HTML 
<div class="ds-accordion" data-size="medium">
  <details
    class="ds-accordion__item"
    data-part="item"
    id="ds-accordion-15-1"
    open
  >
    <summary class="ds-accordion__trigger" data-part="trigger">
      <span
        class="ds-accordion__title"
        data-part="title"
      >Shipping and returns</span>
      <span
        class="ds-accordion__indicator"
        data-part="indicator"
        aria-hidden="true"
      >expand_more</span>
    </summary>
    <div class="ds-accordion__panel" data-part="panel">
      <p>Orders ship within two business days. Returns are free within 30 days.</p>
    </div>
  </details>
  <details
    class="ds-accordion__item"
    data-part="item"
    id="ds-accordion-15-2"
  >
    <summary class="ds-accordion__trigger" data-part="trigger">
      <span
        class="ds-accordion__title"
        data-part="title"
      >Payment methods</span>
      <span
        class="ds-accordion__indicator"
        data-part="indicator"
        aria-hidden="true"
      >expand_more</span>
    </summary>
    <div class="ds-accordion__panel" data-part="panel">
      <p>We accept cards, bank transfers and most digital wallets.</p>
    </div>
  </details>
  <details
    class="ds-accordion__item"
    data-part="item"
    id="ds-accordion-15-3"
  >
    <summary class="ds-accordion__trigger" data-part="trigger">
      <span
        class="ds-accordion__title"
        data-part="title"
      >Warranty</span>
      <span
        class="ds-accordion__indicator"
        data-part="indicator"
        aria-hidden="true"
      >expand_more</span>
    </summary>
    <div class="ds-accordion__panel" data-part="panel">
      <p>Every product is covered for two years from the delivery date.</p>
    </div>
  </details>
</div>