Accordion — Svelte

Accordion component

Expandable panels with single or multiple open. Keyboard (Arrow keys, Home, End, Enter/Space) and ARIA.

Props

• items (array, required) — Objects with id, title, optional content (HTML string)
• id (string, optional) — Unique accordion id
• allowMultiple (boolean, optional) — Allow multiple panels open (default: false)
• defaultExpanded (string | string[], optional) — ID(s) to expand by default
• class (string, optional) — Additional CSS classes

Single open (default)

Allow multiple

Usage

<script>
  import Accordion from './components/svelte/Accordion.svelte';
</script>

<Accordion
  items={[
    { id: 'a', title: 'Panel A', content: '<p>Content A.</p>' },
    { id: 'b', title: 'Panel B', content: '<p>Content B.</p>' },
  ]}
  defaultExpanded="a"
/>
<Accordion items={items} allowMultiple />