Component
<dom-accordion>
custom elementDisclosure-panel group containing one or more <dom-accordion-item> children.
Demo
Collapsible sections
dom-accordion groups dom-accordion-item children — header and content slots per item.
basic.htmlhtml
<dom-accordion class="block w-full max-w-md divide-y divide-border overflow-hidden rounded-2xl border border-border bg-background">
<dom-accordion-item open>
<button slot="header" type="button" class="flex w-full items-center justify-between px-5 py-4 text-left text-sm font-medium text-fg hover:bg-secondary">
Section A
</button>
<div slot="content" class="px-5 pb-5 text-sm text-muted-fg">Lorem ipsum dolor sit amet.</div>
</dom-accordion-item>
<dom-accordion-item>
<button slot="header" type="button" class="flex w-full items-center justify-between px-5 py-4 text-left text-sm font-medium text-fg hover:bg-secondary">
Section B
</button>
<div slot="content" class="px-5 pb-5 text-sm text-muted-fg">Consectetur adipiscing elit.</div>
</dom-accordion-item>
</dom-accordion>
<script type="module">
import '@getdom/studio/headless/accordion.js';
</script>
Usage
Plain HTML
<dom-accordion multiple>
<dom-accordion-item open>
<button slot="header">Section A</button>
<div slot="content">Lorem ipsum…</div>
</dom-accordion-item>
<dom-accordion-item>
<button slot="header">Section B</button>
<div slot="content">Dolor sit amet…</div>
</dom-accordion-item>
</dom-accordion> Register every <dom-*> in one import: import '@getdom/studio/headless'.
Slots
| Name | Scope | Description |
|---|---|---|
| #(default) | — | A list of <dom-accordion-item> children. |
Attributes
| Name | Type | Description |
|---|---|---|
| multiple | boolean | Allow multiple items to be open at once. Otherwise opening one closes the others. |
From dom-accordion.__doc.attributes.
Related