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

## Examples

### Definition list

import AccordionDefinitionList from './AccordionDefinitionList.tsx?raw'

<LiveExample src={AccordionDefinitionList} />

### Single expand behavior

import AccordionSingleExpandBehavior from './AccordionSingleExpandBehavior.tsx?raw'

<LiveExample src={AccordionSingleExpandBehavior} />

### Fixed with multiple expand behavior

import AccordionFixedWithMultipleExpandBehavior from './AccordionFixedWithMultipleExpandBehavior.tsx?raw'

<LiveExample src={AccordionFixedWithMultipleExpandBehavior} />

### Bordered

import AccordionBordered from './AccordionBordered.tsx?raw'

<LiveExample src={AccordionBordered} />

### Toggle icon at start

import AccordionToggleIconAtStart from './AccordionToggleIconAtStart.tsx?raw'

<LiveExample src={AccordionToggleIconAtStart} />
