---
id: Accordion
section: components
cssPrefix: pf-v6-c-accordion
propComponents: ['Accordion', 'AccordionItem', 'AccordionContent', 'AccordionToggle', AccordionExpandableContentBody]
---

import { useState } from 'react';
import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon';

## Examples

### Definition list

```ts file="./AccordionDefinitionList.tsx"
```

### Single expand behavior

```ts file="./AccordionSingleExpandBehavior.tsx"
```

### Fixed with multiple expand behavior

```ts file="./AccordionFixedWithMultipleExpandBehavior.tsx"
```

### Bordered

```ts file="./AccordionBordered.tsx"
```

### Toggle icon at start

```ts file="./AccordionToggleIconAtStart.tsx"
```