---
schema_version: "1"
id: ff261ee675973d1ce2f04b8d5d2c0484c265175640b0eb02d7ad3807c8f05e1f
title: AccordionSection 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_accordionsection_lightning_web_component_readme.md
canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_accordionsection_lightning_web_component_readme.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 3e11064e9755c9b8e1851fe139d349b61e1beb9b95b79da31362574ea5911926
description: For the managed package runtime, this page contains the AccordionSection LWC ReadMe for each Vlocity release.
products:
  - Omnistudio
release: "264"
---
# AccordionSection Lightning Web Component ReadMe (Managed Package)

For the managed package runtime, this page contains the AccordionSection 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_ is the basic element inside the _Accordion Lightning Web Component_.

## Available c-accordion-sectionAttributes

<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="d357948e68">
              <p style="margin-bottom:0;">Attribute</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d357948e74">
              <p style="margin-bottom:0;">Value</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d357948e80">
              <p style="margin-bottom:0;">Type</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d357948e86">
              <p style="margin-bottom:0;">Required</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d357948e92">
              <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="d357948e68 ">
              <p style="margin-bottom:0;">label</p>
            </td>

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

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

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

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

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

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

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

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

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d357948e92 ">
              <p style="margin-bottom:0;">Used to bind to the parent accordion component. Name must be unique for each section inside an accordion.</p>
            </td>

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

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

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

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

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d357948e92 ">
              <p style="margin-bottom:0;">Sets the title of the component.</p>
            </td>

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

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

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

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d357948e86 ">
              <p style="margin-bottom:0;">yes (if menu size and position is given)</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d357948e92 ">
              <p style="margin-bottom:0;">Defines the list of menu items.</p>
            </td>

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

## Example menuitems

_Note_: All the keys of the menuItem array object are required. However, the value can be null or empty. For more info check the readme of the _Menu Lightning Web Component_.

```
[
  {
    actionUrl: "javaScript:void(0);",
    openUrlIn: "newTab",
    name: "menu1",
    type: "action",
    record: {
      id: "001122",
      value: "Menu1",
      label: "Menu1"
    }
  },
  {
    actionUrl: "javaScript:void(0);",
    openUrlIn: "newTab",
    name: "menu1",
    type: "action",
    record: {
      id: "001124",
      value: "Menu3",
      label: "Menu3"
    }
  }
];
```

## Example c-accordion-section Component

```
    @track
  menuitem = [
    {
      actionUrl: "javaScript:void(0);",
      openUrlIn: "newTab",
      name: "menu1",
      type: "action",
      record: {
        id: "001122",
        value: "Menu1",
        label: "Menu1"
      }
    },
    {
      actionUrl: "javaScript:void(0);",
      openUrlIn: "newTab",
      name: "menu2",
      type: "action",
      record: {
        id: "001123",
        value: "Menu2",
        label: "Menu2"
      }
    }]
```

```
<c-accordion active-section-name="B">
  <c-accordion-section
    theme="slds"
    label="Accordion With Menu"
    name="A"
    title="A"
    menuitem="{menuitem}"
  >
    <p>This is the first accordion</p>
    <p>.</p>
    <p>.</p>
    <p>.</p>
  </c-accordion-section>
  <c-accordion-section
    theme="slds"
    label="Accordion Without Menu"
    name="B"
    title="B"
  >
    <p>This is the second accordion</p>
    <p>.</p>
    <p>.</p>
    <p>.</p>
  </c-accordion-section>
  <c-accordion-section
    theme="slds"
    label="Accordion Without Menu"
    name="C"
    title="C"
  >
    <p>This is the third accordion</p>
    <p>.</p>
    <p>.</p>
    <p>.</p>
  </c-accordion-section>
</c-accordion>
```