lwc Salesforce

Expand and collapse single Lightning web component Accordion

How to collapse and expand LWC accordion when an only a single accordion section is available

love your work

Problem- We need to have one account accordion which can be expanded and collapsed by the user but by default its launched as collapsed.


Link for the working code

Example LWC

  • Played with properties of current LWC accordion and designed a custom solution
  • The tricky part was to use “allow-multiple-sections-open” and set the currently active section “active-section-name" as blank
  • Working code is as below .html file
    <lightning-accordion class="example-accordion"
        <lightning-accordion-section name="A" label="Accordion Title A">
            <lightning-button-menu slot="actions"
                                  alternative-text="Show menu"
                <lightning-menu-item value="New" label="Menu Item One"></lightning-menu-item>
                <lightning-menu-item value="Edit" label="Menu Item Two"></lightning-menu-item>
            <p>This is the content area for section A.</p>
            <p>The section height expands to fit your content.</p>

.js file

import { LightningElement } from 'lwc';

export default class LightningExampleAccordionBasic extends LightningElement {
    accordianSection = '';

    handleToggleSection(event) {
          if(this.accordianSection.length === 0){
            this.accordianSection =''
            this.accordianSection ='Account'



Leave a Reply

Your email address will not be published. Required fields are marked *