# Accordion

{% tabs %}
{% tab title="Image" %}
![](https://2506174239-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZfYIFS5Nk3lwMxDKaFp3%2Fuploads%2FBQbpJTQbh0XqSyI3d3B6%2Fimage.png?alt=media\&token=c1226d5a-5333-4e3e-bfbd-fb75bbc81253)
{% endtab %}

{% tab title="Property JSON" %}

```json
{
    "type": "Accordion",
    "properties": {
        "name": "General",
        "collapsed": false
    },
    "children": []
}
```

{% endtab %}

{% tab title="State definition" %}
As this element is used for grouping other elements within, there is no need to reflect this element in the defaultState.json
{% endtab %}
{% endtabs %}

Can contain other elements as children.

## **Configurable properties**

<details>

<summary>name</summary>

**string** - The text to display as the title of the accordion in property panel.

</details>

<details>

<summary>collapsed</summary>

**bool** - Whether the accordion should be collapsed by default

</details>

<details>

<summary>children</summary>

**array** - An array of other elements to appear inside the accordion drawer

</details>