### File

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

### Description

Individual accordion item component that can be expanded or collapsed within an eui-accordion container. Provides a collapsible panel with header and content sections, supporting smooth collapse animations. Uses Angular CDK's accordion item functionality for managing expansion state and accessibility. Supports size variants (S, M, L) and disabled state through BaseStatesDirective. Emits toggleItem event when expansion state changes, allowing parent components to track state.

### Basic usage

Example :

    <eui-accordion>
      <eui-accordion-item>
        <eui-accordion-item-header>Header Text</eui-accordion-item-header>
        Panel content goes here
      </eui-accordion-item>
    </eui-accordion>

### With initial expanded state and size variant

Example :

    <eui-accordion-item isExpanded euiSizeS (toggleItem)="onToggle($event)">
      <eui-accordion-item-header>Small Item</eui-accordion-item-header>
      Content
    </eui-accordion-item>

### Disabled item

Example :

    <eui-accordion-item euiDisabled>
      <eui-accordion-item-header>Disabled Item</eui-accordion-item-header>
      Content
    </eui-accordion-item>

### Accessibility

- Header is keyboard accessible with Enter/Space to toggle expansion
- ARIA attributes (aria-expanded, aria-controls) automatically managed by CDK
- Screen readers announce expansion state and content visibility changes
- Focus remains on header after toggling for consistent keyboard navigation
- Disabled items are not focusable and announced as disabled to screen readers

### Notes

- Must be used within an eui-accordion parent component
- Requires eui-accordion-item-header directive for header content
- Collapse animation is applied automatically on state changes
- Size variants (euiSizeS, euiSizeM, euiSizeL) affect header and content spacing
- toggleItem event emits boolean indicating current expanded state (true = expanded)
- isExpanded input can be used for programmatic control of expansion state

### Metadata

changeDetection | `ChangeDetectionStrategy.OnPush`
HostDirectives | `CdkAccordionItem` Inputs : expanded: isExpanded `BaseStatesDirective` Inputs : euiSizeS euiSizeM euiSizeL euiSizeVariant euiDisabled
selector | `eui-accordion-item`
imports | `EUI_ICON` `CdkAccordionModule`
templateUrl | `./eui-accordion-item.component.html`
styleUrl | `./eui-accordion-item.scss`

### Index

###### Methods

- onToggle

###### Outputs

- toggleItem

###### HostBindings

- class

###### Accessors

- cssClasses

### Outputs

toggleItem
Type : `boolean`
Event emitted when the accordion item is toggled

### HostBindings

class
Type : `string`

### Methods

onToggle
`onToggle(event: Event)`

Handles the toggle event for expanding/collapsing the accordion item Prevents event propagation to avoid interfering with parent handlers

Parameters :

Name | Type | Optional | Description

event

`Event`

No

- The toggle event

Returns : `void`

### Accessors

cssClasses
get `cssClasses()`
Computes and returns the CSS classes for the component based on its current state. Returns : `string`

# results matching ""

# No results matching ""