# Accordion
Divide content into collapsible sections.
```svelte
{#each content as item (item)}
{item.title}
{item.description}
{/each}
```
## Controlled
Use `value` and `onValueChange` to control the value of the Accordion.
```svelte
(value = details.value)}>
{#each ['1', '2', '3'] as item (item)}
Item {item}
Content for item {item}
{/each}
```
## Indicator
Add an indicator to the trigger with `Accordion.ItemIndicator`.
```svelte
{#each ['1', '2', '3'] as item (item)}
Item {item}
Content for item {item}
{/each}
```
## Collapsible
By default you can't close open items. Adding `collapsible` changes this behavior.
```svelte
{#each ['1', '2', '3'] as item (item)}
Item {item}
Content for item {item}
{/each}
```
## Multiple
Adding `multiple` allows items to open independently.
```svelte
{#each ['1', '2', '3'] as item (item)}
Item {item}
Content for item {item}
{/each}
```
## Orientation
Use the `orientation` prop to change the layout direction of the Accordion.
```svelte
{#each ['1', '2', '3'] as item (item)}
Item {item}
Content for item {item}
{/each}
```
## Direction
```svelte
{#each ['1', '2', '3'] as item (item)}
Item {item}
Content for item {item}
{/each}
```
## API Reference
| Property | Default | Type |
| ------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| ids | - | Partial\<\{ root: string; item: (value: string) => string; itemContent: (value: string) => string; itemTrigger: (value: string) => string; }> \| undefined — The ids of the elements in the accordion. Useful for composition. |
| multiple | false | boolean \| undefined — Whether multiple accordion items can be expanded at the same time. |
| collapsible | false | boolean \| undefined — Whether an accordion item can be closed after it has been expanded. |
| value | - | string\[] \| undefined — The controlled value of the expanded accordion items. |
| defaultValue | - | string\[] \| undefined — The initial value of the expanded accordion items.
Use when you don't need to control the value of the accordion. |
| disabled | - | boolean \| undefined — Whether the accordion items are disabled |
| onValueChange | - | ((details: ValueChangeDetails) => void) \| undefined — The callback fired when the state of expanded/collapsed accordion items changes. |
| onFocusChange | - | ((details: FocusChangeDetails) => void) \| undefined — The callback fired when the focused accordion item changes. |
| orientation | "vertical" | "horizontal" \| "vertical" \| undefined — The orientation of the accordion items. |
| dir | "ltr" | "ltr" \| "rtl" \| undefined — The document's text/writing direction. |
| getRootNode | - | (() => ShadowRoot \| Node \| Document) \| undefined — A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron. |
| element | - | Snippet\<\[HTMLAttributes\<"div">]> \| undefined — Render the element yourself |
| value | - | () => AccordionApi\ |
| element | - | Snippet\<\[HTMLAttributes\<"div">]> \| undefined — Render the element yourself |
| children | - | Snippet\<\[() => AccordionApi\]> |
| value | - | string — The value of the accordion item. |
| disabled | - | boolean \| undefined — Whether the accordion item is disabled. |
| element | - | Snippet\<\[HTMLAttributes\<"div">]> \| undefined — Render the element yourself |
| element | - | Snippet\<\[HTMLAttributes\<"button">]> \| undefined — Render the element yourself |
| element | - | Snippet\<\[HTMLAttributes\<"div">]> \| undefined — Render the element yourself |
| element | - | Snippet\<\[HTMLAttributes\<"div">]> \| undefined — Render the element yourself |