# Collapsible
A container that can be expanded or collapsed to show or hide content.
```tsx
import { Collapsible } from '@skeletonlabs/skeleton-react';
import { ArrowUpDownIcon } from 'lucide-react';
export default function Default() {
return (
Design System
);
}
```
## Controlled
Control the active state of the component.
```tsx
import { Collapsible } from '@skeletonlabs/skeleton-react';
import { useState } from 'react';
export default function Controlled() {
const [open, setOpen] = useState(false);
return (
setOpen(details.open)}>
The world dies over and over again, but the skeleton always gets up and walks. Every heart has its own skeletons. The bones of the
skeleton which support the body can become the bars of the cage which imprison the spirit.
Show {open ? 'Less' : 'More'}
);
}
```
## Indicator
Add a visual indicator to the toggle button.
```tsx
import { Collapsible } from '@skeletonlabs/skeleton-react';
import { MinusIcon, PlusIcon } from 'lucide-react';
export default function Default() {
return (
The world dies over and over again, but the skeleton always gets up and walks. Every heart has its own skeletons. The bones of the
skeleton which support the body can become the bars of the cage which imprison the spirit.
Toggle
);
}
```
## Disabled
Set the disabled state for the component.
```tsx
import { Collapsible } from '@skeletonlabs/skeleton-react';
export default function Disabled() {
return (
Hidden!Toggle
);
}
```
## Alignment
Control the position and alignment of the trigger and content using flexbox `items-*`.
```tsx
import { Collapsible } from '@skeletonlabs/skeleton-react';
export default function Alignment() {
return (
The world dies over and over again, but the skeleton always gets up and walks. Every heart has its own skeletons. The bones of the
skeleton which support the body can become the bars of the cage which imprison the spirit.
Toggle
);
}
```
## Direction
Set the text direction (`ltr` or `rtl`) using the `dir` prop.
```tsx
import { Collapsible } from '@skeletonlabs/skeleton-react';
export default function Dir() {
return (
The world dies over and over again, but the skeleton always gets up and walks. Every heart has its own skeletons. The bones of the
skeleton which support the body can become the bars of the cage which imprison the spirit.
Toggle
);
}
```
## Anatomy
Here's an overview of how the Collapsible component is structured in code:
```tsx
import { Collapsible } from '@skeletonlabs/skeleton-react';
export default function Anatomy() {
return (
);
}
```
## API Reference