Accordion Lightning Web Component ReadMe (Managed Package)

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

Attribute	Value	Type	Required	Description
theme	slds, nds (Default: slds)	string		Specifies which theme to use.
active-section-name		string or array		Sets the default open section.
allow-multiple-sections-open	true, false (Default: false)	boolean		To open multiple sections at the same time, set to true.

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));
});