Expand and collapse single Lightning web component Accordion

Problem: We need an account accordion that can be expanded and collapsed by the user. By default, it should be launched in a collapsed state.

Solution:

  • A custom solution was designed by playing with the properties of the current LWC accordion.
  • The key was to use the “allow-multiple-sections-open” property and set the active section “active-section-name” as blank.

Working Code:

HTML File:

 

<!-- This is a representation of the content area for section A. -->

.js file

import { LightningElement } from 'lwc';

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

handleToggleSection(event) {
if(this.accordianSection.length === 0){
this.accordianSection =''
} else {
this.accordianSection ='Account'
}
}
}
Was this article helpful?
YesNo

Similar Posts