April 14, 2020

lightning-accordion - Expand and Collapsible sections in LWC

Sample Code:

HTML:

<template>

    <div class="slds-box slds-theme_default">
        <lightning-accordion class="example-accordion"
                            onsectiontoggle={handleToggleSection}
                            allow-multiple-sections-open>
            <lightning-accordion-section name="A" label="Accordion Title A">
                Test
            </lightning-accordion-section>
        </lightning-accordion> 
    </div>   
   
</template>


JavaScript:

import { LightningElement } from 'lwc';

export default class Example extends LightningElement {
   
    handleToggleSection(event) {

        console.log( 'Selected Sections ' + event.detail.openSections );

    }

}


JavaScript meta.xml: 

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>48.0</apiVersion>
    <isExposed>true</isExposed>     
    <targets>   
        <target>lightning__Tab</target>   
    </targets>
</LightningComponentBundle>



Output:




No comments:

Post a Comment