Accordion
A renderless interactive component for expanding and collapsing content sections, with built-in accessibility.
Title 1
Title 2
Title 3
Title 4
This component wraps AccordionBuilder and exposes its behavior as a renderless component.
Minimal usage
<script>
import { Accordion } from 'svxui';
</script>
<Accordion>
{#snippet children(accordion)}
<div {...accordion.rootAttrs}>
{#each items as value, i (value)}
<!-- Create item -->
{@const item = accordion.getItem(value)}
<!-- Accordion item wrapper -->
<div class="" {...item.itemAttrs}>
<!-- Heading -->
<div {...item.headingAttrs}>
<h2>Title {value}</h2>
<!-- Trigger -->
<button {...item.triggerAttrs}>
{item.expanded ? 'close' : 'open'}
</button>
</div>
<!-- Content -->
{#if item.expanded}
<div {...item.contentAttrs}>
Content {value}
</div>
{/if}
</div>
{/each}
</div>
{/snippet}
</Accordion>API Reference
AccordionProps
This type extends all properties from `AccordionBuilderOptions`.
| Property | Type | Default | Description |
|---|---|---|---|
children | Snippet | Accordion content to render. The snippet receives the AccordionBuilder instance as parameter. |