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.
Does Iris CSS need JavaScript?
No. Every component works with plain HTML and CSS.
Can I use my own styles?
Yes. Iris CSS sits in cascade layers, so your CSS always wins.
One open at a time
Give the details elements the same name and opening one closes the others.
Shipping
Orders ship within two working days.
Returns
Send it back within 30 days for a full refund.
Warranty
Two years on every product.
Summary as a button
role="button" on the summary makes it look like a button, with color classes and all.
Show the details
The content opens under the button.
Related
Tabs are built on
details too. For a menu that opens over the page, use a
dropdown.
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%) |