Expand and collapse single Lightning web component Accordion – User friendly Tech help
Problem- We need to have one account accordion which can be expanded and collapsed by the user but by default its launched as collapsed.
n
Solution:-
n
n
Link for the working code
n
n
n
- n
- 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
n
n
n
n
n n n n n n n
This is the content area for section A.n
.n
.n
.n
The section height expands to fit your content.n n nn
n
.js file
n
import { LightningElement } from 'lwc';nnexport default class LightningExampleAccordionBasic extends LightningElement {n accordianSection = '';nn handleToggleSection(event) {n if(this.accordianSection.length === 0){n this.accordianSection =''n }n else{n this.accordianSection ='Account'n }nn }n}n
Was this article helpful?
YesNo