# Accordion

## Overview

A container with a set of collapsible cards to separate different content views. The cards can be customized separately and have different visibility settings.

<figure><img src="https://837703843-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX6zPRMFFK0yrTghj7cY%2Fuploads%2FFBNe6Lxegp2zQqsFVycZ%2FCleanShot%202025-07-14%20at%2013.12.54%402x-min.png?alt=media&#x26;token=59142147-9419-426e-acc7-b6bf3990d3d5" alt=""><figcaption></figcaption></figure>

### Properties

<table><thead><tr><th width="161.5703125">Name</th><th width="201.0625">Type</th><th>Description</th></tr></thead><tbody><tr><td><code>name</code></td><td><code>string</code></td><td>Component name</td></tr><tr><td><code>collapsed</code></td><td><code>collapsedChanged[]</code></td><td>State of collapsed items</td></tr><tr><td><code>value</code></td><td><code>value</code></td><td>Current component value</td></tr><tr><td><code>children</code></td><td><code>children</code></td><td>Children components</td></tr><tr><td><code>valid</code></td><td><code>boolean</code></td><td>Validation state</td></tr></tbody></table>

### Methods

<table><thead><tr><th width="188.7265625">Name</th><th width="153.58203125">Parameters</th><th width="105.4375">Returns</th><th>Description</th></tr></thead><tbody><tr><td><code>collapse()</code></td><td><code>index: number</code></td><td><code>void</code></td><td>Collapse accordion item</td></tr><tr><td><code>expand()</code></td><td><code>index: number</code></td><td><code>void</code></td><td>Expand accordion item</td></tr><tr><td><code>toggleCollapsed()</code></td><td><code>index: number</code></td><td><code>void</code></td><td>Toggle accordion item's collapsed state</td></tr><tr><td><code>collapseAll()</code></td><td>–</td><td><code>void</code></td><td>Collapse all accordion items</td></tr><tr><td><code>expandAll()</code></td><td>–</td><td><code>void</code></td><td>Expand all accordion items</td></tr><tr><td><code>setValue()</code></td><td><code>data: object</code></td><td><code>void</code></td><td>Set component data</td></tr><tr><td><code>resetValue()</code></td><td>–</td><td><code>void</code></td><td>Reset component to the initial value</td></tr><tr><td><code>validate()</code></td><td>–</td><td><code>void</code></td><td>Trigger form validation</td></tr><tr><td><code>resetValidation()</code></td><td>–</td><td><code>void</code></td><td>Clear validation errors</td></tr></tbody></table>

### Triggers

<table><thead><tr><th width="198.5625">Name</th><th>Description</th></tr></thead><tbody><tr><td><strong>On Collapse Changed</strong></td><td>Triggered when an accordion item's collapse state changes</td></tr><tr><td><strong>On Header Click</strong></td><td>Triggered when an accordion header is clicked</td></tr><tr><td><strong>On Init</strong></td><td>Triggered when the component is initialized</td></tr></tbody></table>
