# Collapsible

A container that can be expanded or collapsed to show or hide content.

```svelte
<script lang="ts">
	import { Collapsible } from '@skeletonlabs/skeleton-svelte';
</script>

<Collapsible>
	<Collapsible.Trigger class="btn preset-filled">Toggle</Collapsible.Trigger>
	<Collapsible.Content>
		Lorem ipsum, dolor sit amet consectetur adipisicing elit. Numquam assumenda veritatis modi repellendus enim accusantium inventore
		architecto maxime voluptates quibusdam velit perferendis mollitia, quas, aliquam sapiente adipisci illo nostrum vitae?
	</Collapsible.Content>
</Collapsible>

```

## Controlled

```svelte
<script lang="ts">
	import { Collapsible } from '@skeletonlabs/skeleton-svelte';

	let open = $state(false);
</script>

<Collapsible {open} onOpenChange={(details) => (open = details.open)}>
	<Collapsible.Trigger class="btn preset-filled">{open ? 'Close' : 'Open'}</Collapsible.Trigger>
	<Collapsible.Content>
		Lorem ipsum, dolor sit amet consectetur adipisicing elit. Numquam assumenda veritatis modi repellendus enim accusantium inventore
		architecto maxime voluptates quibusdam velit perferendis mollitia, quas, aliquam sapiente adipisci illo nostrum vitae?
	</Collapsible.Content>
</Collapsible>

```

## Indicator

```svelte
<script lang="ts">
	import { MinusIcon, PlusIcon } from '@lucide/svelte';
	import { Collapsible } from '@skeletonlabs/skeleton-svelte';
</script>

<Collapsible>
	<Collapsible.Trigger class="btn preset-filled">
		<span>Toggle</span>
		<Collapsible.Indicator class="group">
			<MinusIcon class="size-4 group-data-[state=open]:block hidden" />
			<PlusIcon class="size-4 group-data-[state=open]:hidden block" />
		</Collapsible.Indicator>
	</Collapsible.Trigger>
	<Collapsible.Content>
		Lorem ipsum, dolor sit amet consectetur adipisicing elit. Numquam assumenda veritatis modi repellendus enim accusantium inventore
		architecto maxime voluptates quibusdam velit perferendis mollitia, quas, aliquam sapiente adipisci illo nostrum vitae?
	</Collapsible.Content>
</Collapsible>

```

## Disabled

```svelte
<script lang="ts">
	import { Collapsible } from '@skeletonlabs/skeleton-svelte';
</script>

<Collapsible disabled>
	<Collapsible.Trigger class="btn preset-filled">Toggle</Collapsible.Trigger>
	<Collapsible.Content>
		Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellendus ea reiciendis veritatis quae mollitia, nulla minima cupiditate
		quisquam soluta sunt? Necessitatibus non dolorum voluptas ea maiores itaque laborum officiis quia.
	</Collapsible.Content>
</Collapsible>

```

## Alignment

```svelte
<script lang="ts">
	import { Collapsible } from '@skeletonlabs/skeleton-svelte';
</script>

<Collapsible class="flex flex-col items-center">
	<Collapsible.Trigger class="btn preset-filled">Toggle</Collapsible.Trigger>
	<Collapsible.Content>
		Lorem ipsum, dolor sit amet consectetur adipisicing elit. Numquam assumenda veritatis modi repellendus enim accusantium inventore
		architecto maxime voluptates quibusdam velit perferendis mollitia, quas, aliquam sapiente adipisci illo nostrum vitae?
	</Collapsible.Content>
</Collapsible>

```

## API Reference

### CollapsibleRootProps

| Property         | Default | Type                                                                        | Description                                                                                                                        |
| ---------------- | ------- | --------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
| ids?             | -       | Partial\<\{ root: string; content: string; trigger: string; }> \| undefined | The ids of the elements in the collapsible. Useful for composition.                                                                |
| open?            | -       | boolean \| undefined                                                        | The controlled open state of the collapsible.                                                                                      |
| defaultOpen?     | -       | boolean \| undefined                                                        | The initial open state of the collapsible when rendered.&#xA;Use when you don't need to control the open state of the collapsible. |
| onOpenChange?    | -       | ((details: OpenChangeDetails) => void) \| undefined                         | The callback invoked when the open state changes.                                                                                  |
| onExitComplete?  | -       | VoidFunction \| undefined                                                   | The callback invoked when the exit animation completes.                                                                            |
| disabled?        | -       | boolean \| undefined                                                        | Whether the collapsible is disabled.                                                                                               |
| collapsedHeight? | -       | string \| number \| undefined                                               | The height of the content when collapsed.                                                                                          |
| collapsedWidth?  | -       | string \| number \| undefined                                               | The width of the content when collapsed.                                                                                           |
| getRootNode?     | -       | (() => ShadowRoot \| Node \| Document) \| undefined                         | A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.                                         |
| dir?             | "ltr"   | "ltr" \| "rtl" \| undefined                                                 | The document's text/writing direction.                                                                                             |
| element?         | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined                            | Render the element yourself                                                                                                        |

### CollapsibleRootProviderProps

| Property | Default | Type                                             | Description                 |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| value    | -       | () => CollapsibleApi\<PropTypes>                 | -                           |
| element? | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |

### CollapsibleRootContextProps

| Property | Default | Type                                          | Description |
| -------- | ------- | --------------------------------------------- | ----------- |
| children | -       | Snippet\<\[() => CollapsibleApi\<PropTypes>]> | -           |

### CollapsibleTriggerProps

| Property | Default | Type                                                | Description                 |
| -------- | ------- | --------------------------------------------------- | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"button">]> \| undefined | Render the element yourself |

### CollapsibleIndicatorProps

| Property | Default | Type                                             | Description                 |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |

### CollapsibleContentProps

| Property | Default | Type                                             | Description                 |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |