---
schema_version: "1"
id: af2385dc42783b5acd12c71267ec1629b3521c38110095ac6253f2d3821e9b3d
title: Accordion Lightning Web Component ReadMe (Managed Package)
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/xcloud/264-0-0/os_accordion_lightning_web_component_readme.md
canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_accordion_lightning_web_component_readme.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: ada310378a65500a04fa780cb50e37218a558992f5e13cd876b884b7b7bd6932
description: For the managed package runtime, this page contains the Accordion LWC ReadMe for each Vlocity release.
products:
  - Omnistudio
release: "264"
---
# Accordion Lightning Web Component ReadMe (Managed Package)

For the managed package runtime, this page contains the Accordion LWC ReadMe for each Vlocity release.

![Managed Package app icon](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/resources-global/_corporate/images/managedpackageicon.png) This information is for Omnistudio for Managed Packages. For Omnistudio on standard runtime, see [Omnistudio Help](https://help.salesforce.com/s/articleView?id=xcloud.os_omnistudio_standard.htm&language=en_US).

## Vlocity Insurance and Health Winter '20 and Vlocity CME Spring '20

The _Accordion Lightning Web Component_ displays content as vertically stacked sections. Sections can embed other components.

## Available c-accordion Attributes

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
        <colgroup>
          <col>
          <col>
          <col>
          <col>
          <col>
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d351827e65">
              <p style="margin-bottom:0;">Attribute</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d351827e71">
              <p style="margin-bottom:0;">Value</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d351827e77">
              <p style="margin-bottom:0;">Type</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d351827e83">
              <p style="margin-bottom:0;">Required</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d351827e89">
              <p style="margin-bottom:0;">Description</p>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d351827e65 ">
              <p style="margin-bottom:0;">theme</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d351827e71 ">
              <p style="margin-bottom:0;">slds, nds (Default: slds)</p>
            </td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d351827e77 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d351827e83 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d351827e89 ">
              <p style="margin-bottom:0;">Specifies which theme to use.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d351827e65 ">
              <p style="margin-bottom:0;">active-section-name</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d351827e71 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d351827e77 ">
              <p style="margin-bottom:0;">string or array</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d351827e83 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d351827e89 ">
              <p style="margin-bottom:0;">Sets the default open section.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d351827e65 ">
              <p style="margin-bottom:0;">allow-multiple-sections-open</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d351827e71 ">
              <p style="margin-bottom:0;">true, false (Default: false)</p>
            </td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d351827e77 ">
              <p style="margin-bottom:0;">boolean</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d351827e83 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d351827e89 ">
              <p style="margin-bottom:0;">To open multiple sections at the same time, set to true.</p>
            </td>

          </tr>
        </tbody>
      </table>

## Example c-accordion Component

```
activeSectionName = ["a", "b"];
allow = true;
```

```
<c-accordion active-section-name="b">
  <c-accordion-section name="a" title="a">...</c-accordion-section>
  <c-accordion-section name="b" title="b">...</c-accordion-section>
  <c-accordion-section name="c" title="c">...</c-accordion-section>
</c-accordion>

<!-- The order of attributes is important. allow-multiple-sections-open should be placed before active-section-name  -->
<c-accordion
  allow-multiple-sections-open="{allow}"
  active-section-name="{activeSectionName}"
>
  <c-accordion-section name="a" title="a">...</c-accordion-section>
  <c-accordion-section name="b" title="b">...</c-accordion-section>
  <c-accordion-section name="c" title="c">...</c-accordion-section>
</c-accordion>
```

## Available listeners

onaccordionsectionopen

Triggered after a section opens. The event detail contains the name of the section and its uniqueKey which can be used to identify it using class `accordion-class_[uniqueKey]`

onaccordionsectionclose

Triggered after a section closes. The event detail contains the name of the section and its uniqueKey which can be used to identify it using class `accordion-class_[uniqueKey]`

```
this.template.addEventListener("onaccordionsectionclose", function(event) {
  console.log(
    "onAccordionSectionClose : ",
    JSON.stringify(event.detail.result)
  );
});

this.template.addEventListener("onaccordionsectionopen", function(event) {
  console.log("onAccordionSectionOpen : ", JSON.stringify(event.detail.result));
});
```