# Accordion

Source: https://iriscss.com/documentation/components/accordion/

Every `details` element is an accordion. It animates open and closed with no JavaScript.

The summary gets a chevron that turns when the panel opens. Opening and closing animate where the browser supports `::details-content` and `interpolate-size`, and snap open elsewhere.

```html
<details>
  <summary>Does Iris CSS need JavaScript?</summary>
  <p>No. Every component works with plain HTML and CSS.</p>
</details>
<details open>
  <summary>Can I use my own styles?</summary>
  <p>Yes. Iris CSS sits in cascade layers, so your CSS always wins.</p>
</details>
```

## One open at a time

Give the `details` elements the same `name` and opening one closes the others.

```html
<details name="faq" open>
  <summary>Shipping</summary>
  <p>Orders ship within two working days.</p>
</details>
<details name="faq">
  <summary>Returns</summary>
  <p>Send it back within 30 days for a full refund.</p>
</details>
<details name="faq">
  <summary>Warranty</summary>
  <p>Two years on every product.</p>
</details>
```

## Summary as a button

`role="button"` on the summary makes it look like a [button](https://iriscss.com/documentation/elements/button/index.html.md), with color classes and all.

```html
<details>
  <summary role="button" class="secondary">Show the details</summary>
  <p>The content opens under the button.</p>
</details>
```

## Related

[Tabs](https://iriscss.com/documentation/components/tabs/index.html.md) are built on `details` too. For a menu that opens over the page, use a [dropdown](https://iriscss.com/documentation/components/dropdown/index.html.md).

## Variables

| Variable | Default |
| --- | --- |
| `--i-accordion-summary-color-text` | `var(--i-color-text)` |
| `--i-accordion-summary-hover-color-text` | `color-mix(in oklab, var(--i-color-primary), var(--i-color-ink) 25%)` |