FAQ
pura-faq groups pura-faq-item elements (each a question/answer pair on native details/summary, getting accessibility and keyboard support for free). By default it is single-open (opening one item closes the others); use the multi attribute to allow several open at once. It is agent-native: it exposes role="region", stable data-* attributes (data-total, data-open, data-open-index), and a global registry window.__puraFaqs indexed by id, where each instance offers a machine-readable snapshot() with the question and the state of each item, plus callable methods like openItem(i), closeItem(i), and collapseAll().
Preview
<pura-faq label="Frequently asked questions">
<pura-faq-item open>
<span slot="question">Does pura have dependencies?</span>
No. pura is a library of native Web Components, with zero dependencies. Just import the component and use the tag in your HTML.
</pura-faq-item>
<pura-faq-item>
<span slot="question">Does it work with any framework?</span>
Yes. Because they are standard Web Components, the elements work in React, Vue, Svelte, or plain HTML, with no adapters.
</pura-faq-item>
<pura-faq-item>
<span slot="question">How do I allow several items open at once?</span>
Add the <code>multi</code> attribute to the <code><pura-faq></code> element.
</pura-faq-item>
</pura-faq>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
multi | boolean | false | Allows several items open at the same time. Without it, the FAQ is single-open: opening one item closes the others. |
label | string | Frequently asked questions | Accessible name for the FAQ region (aria-label). |
open | boolean | false | On pura-faq-item: reflected, indicates whether the answer is expanded. |
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/faq.js"></script>import "./pura/lib/faq.js";