# EuiAccordionComponent

**Type:** component



Accordion container component that manages a collection of expandable panel items.
Provides collapsible content sections with automatic expansion state coordination across child items.
Supports single or multi-expansion modes to control whether multiple panels can be open simultaneously.
Built on Angular CDK Accordion for robust expansion state management and accessibility.
Content is projected via ng-content, expecting eui-accordion-item children for proper functionality.
Typically used for organizing related content in expandable sections like FAQs, settings panels, or navigation menus.

#### Single expansion mode (default)
```html
<eui-accordion>
  <eui-accordion-item>
    <eui-accordion-item-header>Section 1</eui-accordion-item-header>
    Content for section 1
  </eui-accordion-item>
  <eui-accordion-item>
    <eui-accordion-item-header>Section 2</eui-accordion-item-header>
    Content for section 2
  </eui-accordion-item>
</eui-accordion>
```

#### Multi-expansion mode
```html
<eui-accordion isMulti>
  <eui-accordion-item (toggleItem)="onToggle($event)">
    <eui-accordion-item-header>Item 1</eui-accordion-item-header>
    Content 1
  </eui-accordion-item>
</eui-accordion>
```

### Accessibility
- Uses Angular CDK Accordion which provides built-in ARIA attributes (aria-expanded, aria-controls)
- Each accordion item header is keyboard accessible and can be toggled with Enter/Space
- Screen readers announce expansion state changes automatically
- Focus management handled by CDK for keyboard navigation between items

### Notes
- In single-expansion mode (default), opening one item automatically closes others
- Set `isMulti` to allow multiple items to be expanded simultaneously
- Must contain eui-accordion-item children for proper functionality
- Expansion state is managed internally by Angular CDK Accordion
- Use toggleItem event on items to track expansion state changes


**Selector:** `eui-accordion`

## Inputs
- **multi: isMulti**: `any` - From host directive: #[[file:CdkAccordion.md]]
