# Collapsible

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

```tsx
import { Collapsible } from '@skeletonlabs/skeleton-react';

export default function Default() {
	return (
		<Collapsible>
			<Collapsible.Trigger className="btn preset-filled">Toggle</Collapsible.Trigger>
			<Collapsible.Content>
				Lorem ipsum dolor sit amet consectetur, adipisicing elit. Velit pariatur error soluta voluptate, accusantium modi repudiandae omnis
				eligendi, suscipit repellat impedit architecto neque sequi mollitia autem dicta quae ipsum et?
			</Collapsible.Content>
		</Collapsible>
	);
}

```

## Controlled

```tsx
import { Collapsible } from '@skeletonlabs/skeleton-react';
import { useState } from 'react';

export default function Controlled() {
	const [open, setOpen] = useState(false);

	return (
		<Collapsible open={open} onOpenChange={(details) => setOpen(details.open)}>
			<Collapsible.Trigger className="btn preset-filled">{open ? 'Close' : 'Open'}</Collapsible.Trigger>
			<Collapsible.Content>
				Lorem ipsum dolor sit amet consectetur, adipisicing elit. Velit pariatur error soluta voluptate, accusantium modi repudiandae omnis
				eligendi, suscipit repellat impedit architecto neque sequi mollitia autem dicta quae ipsum et?
			</Collapsible.Content>
		</Collapsible>
	);
}

```

## Indicator

```tsx
import { Collapsible } from '@skeletonlabs/skeleton-react';
import { MinusIcon, PlusIcon } from 'lucide-react';

export default function Default() {
	return (
		<Collapsible>
			<Collapsible.Trigger className="btn preset-filled">
				<span>Toggle</span>
				<Collapsible.Indicator className="group">
					<MinusIcon className="size-4 group-data-[state=open]:block hidden" />
					<PlusIcon className="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

```tsx
import { Collapsible } from '@skeletonlabs/skeleton-react';

export default function Disabled() {
	return (
		<Collapsible disabled>
			<Collapsible.Trigger className="btn preset-filled">Toggle</Collapsible.Trigger>
			<Collapsible.Content>
				Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quas maxime in praesentium reiciendis eveniet modi mollitia? Odio
				accusantium veritatis accusamus quia placeat sapiente reiciendis? Consectetur, quis! Voluptatem omnis accusantium blanditiis.
			</Collapsible.Content>
		</Collapsible>
	);
}

```

## Alignment

```tsx
import { Collapsible } from '@skeletonlabs/skeleton-react';

export default function Alignment() {
	return (
		<Collapsible className="flex flex-col items-center">
			<Collapsible.Trigger className="btn preset-filled">Toggle</Collapsible.Trigger>
			<Collapsible.Content>
				Lorem ipsum dolor sit amet consectetur, adipisicing elit. Velit pariatur error soluta voluptate, accusantium modi repudiandae omnis
				eligendi, suscipit repellat impedit architecto neque sequi mollitia autem dicta quae ipsum et?
			</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?         | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined              | Render the element yourself                                                                                                        |

### CollapsibleRootProviderProps

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

### CollapsibleRootContextProps

| Property | Default | Type                                                   | Description |
| -------- | ------- | ------------------------------------------------------ | ----------- |
| children | -       | (collapsible: CollapsibleApi\<PropTypes>) => ReactNode | -           |

### CollapsibleTriggerProps

| Property | Default | Type                                                              | Description                 |
| -------- | ------- | ----------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"button">) => Element) \| undefined | Render the element yourself |

### CollapsibleIndicatorProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |

### CollapsibleContentProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |