# Accordion
Divide content into collapsible sections.
```tsx
import { Accordion } from '@skeletonlabs/skeleton-react';
import { ChevronDownIcon } from 'lucide-react';
import { Fragment } from 'react';
export default function Default() {
/**
* Attribution
* @see https://www.healthline.com/health/fun-facts-about-the-skeletal-system#8-More-than-half-your-bones-are-in-your-hands-and-feet
*/
const items = [
{
id: '1',
title: 'Your skeleton is made of more than 200 bones',
description:
'Inside your body are 206 bones. Each bone plays a very important role in making all the mechanics of your body function properly. If a bone is broken, all the bones around it can’t perform their duty properly.',
},
{
id: '2',
title: 'The smallest bone in the body is in your ear',
description:
'The stapes, a bone in your inner ear, is the smallest of all your bones. This bone is also sometimes called the stirrup because of its Y shape. Together with the anvil and hammer bones, the stapes helps translate sounds you hear into waves your brain can understand.',
},
{
id: '3',
title: 'One bone isn’t connected to any other bones',
description:
'The hyoid bone, which is in your throat, is the only bone that doesn’t connect to a joint. The hyoid is responsible for holding your tongue in place.',
},
];
return (
{items.map((item, i) => (
{i !== 0 &&
}
{item.title}
{item.description}
))}
);
}
```
## Controlled
Use the `open` and `onOpenChange` props to control the state.
```tsx
import { Accordion } from '@skeletonlabs/skeleton-react';
import { useState } from 'react';
export default function Controlled() {
const [value, setValue] = useState(['1']);
return (
setValue(details.value)}>
{['1', '2', '3'].map((item) => (
Item {item}
Content for item {item}
))}
);
}
```
## Multiple
Allow multiple accordion items to stay open at once using the `multiple` prop.
```tsx
import { Accordion } from '@skeletonlabs/skeleton-react';
// [!code highlight]
export default function Multiple() {
return (
{['1', '2', '3'].map((item) => (
Item {item}
Content for item {item}
))}
);
}
```
## Collapsible
Allow closing all items when one is open using the `collapsible` prop.
```tsx
import { Accordion } from '@skeletonlabs/skeleton-react';
export default function Collapsible() {
return (
{['1', '2', '3'].map((item) => (
Item {item}
Content for item {item}
))}
);
}
```
## Indicator
Add a custom indicator to accordion triggers.
```tsx
import { Accordion } from '@skeletonlabs/skeleton-react';
import { MinusIcon, PlusIcon } from 'lucide-react';
export default function Indicator() {
return (
{['1', '2', '3'].map((item) => (
Item {item}
Content for item {item}
))}
);
}
```
## Orientation
Render the accordion vertically or horizontally using the `orientation` prop.
```tsx
import { Accordion } from '@skeletonlabs/skeleton-react';
export default function Orientation() {
return (
{['1', '2', '3'].map((item) => (
Item {item}
Content for item {item}
))}
);
}
```
## Dir
Set the text direction (`ltr` or `rtl`) using the `dir` prop.
```tsx
import { Accordion } from '@skeletonlabs/skeleton-react';
export default function Dir() {
return (
{['1', '2', '3'].map((item) => (
Item {item}
Content for item {item}
))}
);
}
```
## Anatomy
Here's an overview of how the Accordion component is structured in code:
```tsx
import { Accordion } from '@skeletonlabs/skeleton-react';
export default function Anatomy() {
return (
);
}
```
## API Reference