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)

<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

<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

<ng-content/>