# Accordion

> Stacked disclosures that open one section of content at a time, on native details.

## Anatomy

Wrap native `<details>` items in an `.accordion` to stack them as joined tiles. Each item's `<summary>` is its header, and everything after the summary is its panel.

Add `open` to an item to show it expanded on load. The browser handles the rest without JavaScript. The summary acts as a button that reports whether its item is open, and Enter or Space toggles it. Opening animates in engines that can transition to `auto` height. Elsewhere, and under reduced motion, the item opens at once.

Can I change my plan later?

Yes. The new plan starts with your next billing period.

How do I export my data?

Open Settings, then Export. The download includes every project you own.

Who can see my projects?

Only the people you invite. Public links are off until you turn them on.

```
<div class="accordion">
  <details open>
    <summary>Can I change my plan later?</summary>
    <p>Yes. The new plan starts with your next billing period.</p>
  </details>
  <details>
    <summary>How do I export my data?</summary>
    <p>Open Settings, then Export. The download includes every project you own.</p>
  </details>
</div>
```

## One open at a time

Give the items one shared `name` and the browser keeps at most one of them open. Opening an item closes the one that was open.

Standard delivery

Three to five working days. Free on orders over $50.

Express delivery

Next working day when you order before 2 PM.

Collect in store

Ready in two hours. We send a code when it is.

```
<div class="accordion">
  <details name="shipping" open>
    <summary>Standard delivery</summary>
    <p>Three to five working days. Free on orders over $50.</p>
  </details>
  <details name="shipping">
    <summary>Express delivery</summary>
    <p>Next working day when you order before 2 PM.</p>
  </details>
</div>
```

## Leading icon

Put a leading icon first in the summary. Hide it from assistive technology, since the summary text already names the item.

Privacy

Choose who can see your profile and activity.

Notifications

Pick which updates reach you by email and which stay in the app.

```
<div class="accordion">
  <details>
    <summary>
      <span class="material-symbols" aria-hidden="true">lock</span>
      Privacy
    </summary>
    <p>Choose who can see your profile and activity.</p>
  </details>
</div>
```

## Accessibility

Leave the summary's role and expanded state to the browser. A `role` or `aria-expanded` that you add overrides them and goes stale the first time the item toggles.

Keep links and buttons out of the summary. The summary is already a button, so a control inside it is nested in another control. Pressing that control also toggles the item. Put actions in the panel.

## Tokens

Override these on the `.accordion`.

| Token | Default |
| --- | --- |
| `--md-comp-accordion-container-color` | `--md-sys-color-surface-container` |
| `--md-comp-accordion-shape` | 20px |
| `--md-comp-accordion-grouped-shape` | 4px |
| `--md-comp-accordion-gap` | 2px |
| `--md-comp-accordion-header-height` | 56px |
| `--md-comp-accordion-padding` | 16px |