# 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

Section 1 Content for section 1

Section 2 Content for section 2

``` #### Multi-expansion mode ```html

Item 1 Content 1

``` ### 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]]