Accordion
Stacked sections that open in place. It’s built on native details elements, so it works without a script and find-in-page opens the right section.
- CSS
css/components/accordion.css- JS
js/components/accordion.js (optional)
01 — Variants
One open at a time
Give every item the same name, and opening one closes the others. A label can sit at the right of a heading.
What sizes can I upload?
JPG, PNG, HEIC or WebP, up to 20 MB.
Who can see my photos?
Anyone with the link, unless you make the post private.
Can I sell prints?
Not yet.
Flush
.accordion--flush drops the outer rules, for inside a list or against a panel’s edge. Without a shared name, several can be open.
Camera
Fujifilm X100V
License
All rights reserved.
02 — Behavior
Script
| Name | Detail |
|---|---|
| Without a script | Opening and closing, keyboard and find-in-page all work. |
aria-disabled="true" | On a summary, keeps that item shut (needs accordion.js). |
el.jewelAccordion | .openAll() and .closeAll(). |
03 — Usage
Use it for
- Questions and answers, settings groups, long details people only sometimes need.
Avoid
- Content everyone needs. Don’t hide it.
- A single item. Use a link or show it.
04 — Accessibility
Notes
- Native
<details>and<summary>: screen readers announce expanded and collapsed. - Keep headings short; the summary is read every time someone tabs past it.
05 — Without Jewel’s JS
What the script does
Native <details> opens and closes each item, so the keyboard and find-in-page work without a script. The script only keeps a disabled item shut and, in browsers without native support, closes the others in a name group. The CSS reads only the markup below, so a framework can set it itself and leave out accordion.js and data-component.
| State | Set this | Notes |
|---|---|---|
| Open | open on details.accordion__item | Turns the chevron. The browser toggles it on click; listen for toggle to keep your state in step. |
| One open at a time | The same name="…" on each item | Native in current browsers. Where it isn’t, close the others when one opens. |
| Disabled | aria-disabled="true" on the summary | Dims it. Call preventDefault() on its clicks to keep it shut. |
| Open all, close all | open on each item, skipping disabled ones | Replaces el.jewelAccordion.openAll() and .closeAll(). |