1. components
  2. svelte
  3. accordions

Accordions

Divide content into collapsible sections.

undefined

Multiple Items

Apply the multiple prop to to enable opening more than one panel at a time.

<Accordion multiple>...</Accordion>

Open State

Set the visible panels using the open prop.

<AccordionItem open>...</AccordionItem>

State Icons

Set the state icons using the following snippets within the root of the Accordion component.

<Accordion>
{#snippet iconOpen()}&uarr;{/snippet}
{#snippet iconClosed()}&darr;{/snippet}
<!-- ... -->
</Accordion>