# EuiAccordionComponent

**Type:** component

<p>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.</p>
<h4>Single expansion mode (default)</h4>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-accordion&gt;
  &lt;eui-accordion-item&gt;
    &lt;eui-accordion-item-header&gt;Section 1&lt;/eui-accordion-item-header&gt;
    Content for section 1
  &lt;/eui-accordion-item&gt;
  &lt;eui-accordion-item&gt;
    &lt;eui-accordion-item-header&gt;Section 2&lt;/eui-accordion-item-header&gt;
    Content for section 2
  &lt;/eui-accordion-item&gt;
&lt;/eui-accordion&gt;</code></pre></div><h4>Multi-expansion mode</h4>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-accordion isMulti&gt;
  &lt;eui-accordion-item (toggleItem)=&quot;onToggle($event)&quot;&gt;
    &lt;eui-accordion-item-header&gt;Item 1&lt;/eui-accordion-item-header&gt;
    Content 1
  &lt;/eui-accordion-item&gt;
&lt;/eui-accordion&gt;</code></pre></div><h3>Accessibility</h3>
<ul>
<li>Uses Angular CDK Accordion which provides built-in ARIA attributes (aria-expanded, aria-controls)</li>
<li>Each accordion item header is keyboard accessible and can be toggled with Enter/Space</li>
<li>Screen readers announce expansion state changes automatically</li>
<li>Focus management handled by CDK for keyboard navigation between items</li>
</ul>
<h3>Notes</h3>
<ul>
<li>In single-expansion mode (default), opening one item automatically closes others</li>
<li>Set <code>isMulti</code> to allow multiple items to be expanded simultaneously</li>
<li>Must contain eui-accordion-item children for proper functionality</li>
<li>Expansion state is managed internally by Angular CDK Accordion</li>
<li>Use toggleItem event on items to track expansion state changes</li>
</ul>


**Selector:** `eui-accordion`

**Standalone:** false
