> For the complete documentation index, see [llms.txt](https://docs.gridmate.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.gridmate.io/package-reference/components-library/gm-dynamic-accordion.md).

# GM - Dynamic Accordion

## **Documentation**

**GM - Dynamic Accordion** component is used to display an accordion in a Lightning App Page. It could be useful to build a workspace like an SRD Workspace.

## **Specification**

<table data-full-width="true"><thead><tr><th width="210.33333333333331">Property</th><th width="134">Type</th><th>Description</th></tr></thead><tbody><tr><td>Accordion Config *</td><td>String</td><td>Tabs JSON configuration describing the accordion and the content for each section.</td></tr><tr><td>Show Border</td><td>Boolean</td><td>Check this option if you wish to add a border.</td></tr></tbody></table>

Example of Dynamic Accordion  configuration

```coffeescript
[
   {
      "label": "Contacts",
      "components": [
         {
            "component": "gmpkg:ListViewDataGridComponent",
            "attributes": {
               "relatedObjectName": "Contact",
               "listViewName": "AllContacts",
               "canCreate": false,
               "canUpdate": true,
               "canDelete": true,
               "canFilter": true,
               "recordDetail": true,
               "inline": true,
               "showBorder": true,
               "showColumnBorder": true
            }
         }
      ]
   },
   {
      "label": "Accounts",
      "components": [
         {
            "component": "gmpkg:ListViewDataGridComponent",
            "attributes": {
               "relatedObjectName": "Account",
               "listViewName": "AllAccounts",
               "canCreate": false,
               "canUpdate": true,
               "canDelete": true,
               "canFilter": true,
               "showBorder": true,
               "inline": true
            }
         }
      ]
   }
]
```

## **API Reference**

{% tabs fullWidth="true" %}
{% tab title="DataGridAccordionComponent.design" %}

```xml
<design:component label="GM - Dynamic Accordion">
    <design:attribute name="jsonSections" label="Accordion Config." description="Accordion JSON configuration"/>
    <design:attribute name="showBorder" label="Show border?" />    
</design:component>
```

{% endtab %}
{% endtabs %}