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.


  • 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?

Similar Posts