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

Example LWC

n

    n

  • Played with properties of current LWC accordion and designed a custom solution
  • n

  • The tricky part was to use “allow-multiple-sections-open” and set the currently active section “active-section-name" as blank
  • n

  • Working code is as below .html file
  • 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

Similar Posts