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