Accordion
A native component (Web Component) built on top of the <details>/<summary> elements, inheriting accessibility and keyboard navigation for free. Use it to group content into panels that the user opens and closes, such as FAQs or settings split into sections. With the single attribute, only one panel stays open at a time.
Preview
<pura-accordion single>
<pura-accordion-item label="What is pura?" open>
pura is a UI library built with native Web Components, with no dependencies.
</pura-accordion-item>
<pura-accordion-item label="Do I need a framework?">
No. The components work on any HTML page, with or without a framework.
</pura-accordion-item>
<pura-accordion-item label="How does accessibility work?">
Each item uses native <details>/<summary>, with keyboard and screen reader support.
</pura-accordion-item>
</pura-accordion>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
single | boolean | false | On <pura-accordion>: when present, keeps only one item open at a time. |
label | string | "" | On <pura-accordion-item>: text shown in the panel's header/trigger. |
open | boolean | false | On <pura-accordion-item>: when present, the item starts expanded (also reflected as the .open property). |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/accordion.js"></script>import "./pura/lib/accordion.js";