### File

`packages/components/eui-accordion/eui-accordion.component.ts`

### Description

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)

Example :

    <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

Example :

    <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

### Metadata

changeDetection | `ChangeDetectionStrategy.OnPush`
HostDirectives | `CdkAccordion` Inputs : multi: isMulti
host | `{ }`
selector | `eui-accordion`

template

    <ng-content/>

styleUrl | `./eui-accordion.scss`

### Index

###### Methods

- cssClasses

### Methods

cssClasses
`cssClasses()`
Computes and returns the CSS classes for the component based on its current state. Returns : `string` Space-separated string of CSS class names

# results matching ""

# No results matching ""