You are here:
Accordion Lightning Web Component ReadMe (Managed Package)
For the managed package runtime, this page contains the Accordion LWC ReadMe for each Vlocity release.
This information is for Omnistudio for Managed Packages. For Omnistudio on standard runtime, see Omnistudio Help.
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));
});