Accordion in Salesforce Lightning Web Components : Abhijeet

March 10, 2025 March 10, 2025

Accordion in Salesforce Lightning Web Components
by: Abhijeet
blow post content copied from SalesForce FAQs
click here to view original post

### Summary of Salesforce Lightning Accordion Tutorial In Salesforce Lightning Web Components (LWC), you can create an accordion component using the built-in `lightning-accordion`. This feature allows you to organize data by expanding and collapsing content sections. #### What is a Lightning Accordion? The `lightning-accordion` component serves as a container for multiple `lightning-accordion-section` components. Each section can be expanded or collapsed by clicking its header. #### Key Attributes: - **For Lightning Accordion:** - `active-section-name`: Specifies which section(s) to expand by default. - `allow-multiple-sections-open`: Allows multiple sections to be open simultaneously. - **For Lightning Accordion Section:** - `label`: The title displayed for the section. - `name`: A unique identifier for the section. #### How to Add an Accordion: 1. **Single Active Section**: Create an accordion where only one section can be expanded at a time. - Example code is provided for both HTML and JavaScript files to set up the accordion. 2. **Multiple Active Sections**: Create an accordion that allows multiple sections to be expanded at once. - This involves using the `allow-multiple-sections-open` attribute and dynamically managing the active sections in JavaScript. #### Use Cases: - **Single Active Section**: Displaying account information with one section expanded by default. - **Multiple Active Sections**: Showing both account information and billing details with multiple sections open at the same time. ### Conclusion This tutorial provides a comprehensive guide on how to implement accordions in Salesforce Lightning Web Components, showcasing both single and multiple active sections. This feature enhances data organization and user experience in Salesforce applications. ### Additional Information For further learning, consider exploring related topics such as decorators in LWC, displaying toast notifications, and adding toggle buttons for Lightning Datatables. ### Hashtags for SEO #Salesforce #LightningWebComponents #LWC #SalesforceTutorial #AccordionComponent #WebDevelopment #SalesforceDevelopment #UIUX #JavaScript #SalesforceTips

In Salesforce Lightning Web Components, we have a built-in feature to create an accordion component using lightning-accordion. By creating an accordion in Lightning web components, we can expand and collapse content sections to organize the data.

In this Salesforce tutorial, we will learn about the lightning-accordion feature and how to add an accordion in Salesforce Lightning Web Components.

What is Salesforce Lightning Accordion?

In Salesforce we have an inbuilt component to add accordion in the LWC components, that is ‘lightning-accordion’. The lightning-accordion component in LWC is a container that holds multiple ‘lightning-accordion-section’ components, and each section can be expanded or collapsed by clicking its header.

Attributes for Lightning Accordion:

The Lightning Accordion has attributes, which are details we add to tags in a “name: value” format. Both “lightning-accordion” and “lightning-accordion-section” have some attributes that are mentioned below.

Lightning Accordion Attributes:

active-section-name: This feature expands specified accordion sections by taking a string for a single section or a list of section names.
allow-multiple-sections-open: This allows expanding multiple sections within the same component. If not used, then we can only expand a single section, like when you expand another section, the current one will be closed.
title – It displays the text when we hover on the element.

Lightning Accordion Section Attributes:

label- The text that displays as the title of the section.
name- The unique section name to use with the active-section-name attribute in the accordion component.

Add Lightning Accordion in Lightning Web Components

There are two ways to add an accordion in the lightning web components.

Accordion with a Single Active Section
Accordion with Multiple Active Sections

Accordion With a Single Active Section in LWC Component

In this example, we will create an accordion with three sections and set one section to be active (expanded) by default. When we click on another section to expand it, the current one will be closed.

Follow the steps below to add an accordion with a single active section in the LWC component.

1. Create an LWC component and enter the code below in an HTML file. We have defined the sections using lightning accordion.

<template>
    <lightning-card title="Accordion with Single Active Section" icon-name="utility:accordion">
        <div class="slds-p-around_medium">
            <lightning-accordion active-section-name="sectionB">
                <lightning-accordion-section name="sectionA" label="Section A">
                    This is the content of Section A.
                </lightning-accordion-section>
                <lightning-accordion-section name="sectionB" label="Section B">
                    This is the content of Section B, which is active by default.
                </lightning-accordion-section>
                <lightning-accordion-section name="sectionC" label="Section C">
                    This is the content of Section C.
                </lightning-accordion-section>
            </lightning-accordion>
        </div>
    </lightning-card>
</template>

2. After this, enter the below code in the JS file.

import { LightningElement } from 'lwc';

export default class AccordionSingle extends LightningElement {}

The LWC component displays only the accordion, and since it is built-in, we don’t need to define it.

3. Make the component visible to the lightning page using the code below in the meta.xml file.

<isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>

4. Deploy the LWC component to the Lightning page. There, you will see the accordion section we defined in the HTML file.

Add accordion to Lightning Web components

This way, we can add an accordion with a single active section in Salesforce lightning web components.

Add Accordion With Multiple Active Sections in LWC Component

To expand or collapse multiple sections in an accordion, we need to use the allow-multiple-sections-open attribute and set the activeSectionName property dynamically in JavaScript.

Add accordion in Salesforce Lightning Web Components

To add accordion with multiple active sections, create a new LWC component and follow the below steps.

1. After creating the LWC component, enter the code below in the HTML file.

<template>
    <lightning-card title="Accordion with Multiple Active Sections" icon-name="utility:accordion">
        <div class="slds-p-around_medium">
            <lightning-accordion 
                allow-multiple-sections-open 
                active-section-name={activeSections}>
                <lightning-accordion-section name="sectionA" label="Section A">
                    This is the content of Section A.
                </lightning-accordion-section>
                <lightning-accordion-section name="sectionB" label="Section B">
                    This is the content of Section B.
                </lightning-accordion-section>
                <lightning-accordion-section name="sectionC" label="Section C">
                    This is the content of Section C.
                </lightning-accordion-section>
            </lightning-accordion>
        </div>
    </lightning-card>
</template>

The attribute “allow-multiple-sections-open” enables multiple sections to expand at the same time.

2. Enter the below code in the JS file to set the ActiveSectionName dynamically.

import { LightningElement, track } from 'lwc';

export default class AccordionMultiple extends LightningElement {
    @track activeSections = ['sectionA', 'sectionC'];
}

In the connectedCallback, we use querySelector to access the lightning-accordion component and set activeSectionName to an array of section names [‘sectionA’, ‘sectionC’] to make “Section A” and “Section C” expanded by default.

3. Make the component visible to the Lightning pages using the code below in the meta.xml file.

<isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>

4. After deploying the LWC component to the Lightning page, we can see the accordion component enabled with multiple expanded sections.

Accordion with multiple active section in LWC

In this LWC accordion, we can expand or collapse multiple sections at a time, unlike the single activated section accordion.

Use Case Scenario For Adding Accordion in LWC

In the examples below, we will see the use case for adding the Lightning accordion to the Salesforce Lightning web components.

Single Active Section: To show “Account Information” as the default expanded section.
Multiple Active Sections: To show “Account Information” and “Billing Details” as default expanded sections, and multiple sections can be expanded at the same time.

Accordion with a Single Active Section to Display Account Information

To create a single active accordion for displaying the account information, first create an LWC component and follow the below steps.

1. We will display the account details in accordion by dynamically fetching the account records using the controller class below.

public with sharing class AccountController {
    @AuraEnabled(cacheable=true)
    public static Map<String, Object> getAccountDetails(Id accountId) {
        Account acc = [SELECT Name, Industry, AnnualRevenue, 
                       BillingStreet, BillingCity, BillingCountry, 
                       Phone, Email__c
                       FROM Account WHERE Id = :accountId LIMIT 1];
        return new Map<String, Object>{
            'name' => acc.Name,
            'industry' => acc.Industry,
            'annualRevenue' => String.valueOf(acc.AnnualRevenue),
            'billingStreet' => acc.BillingStreet,
            'billingCity' => acc.BillingCity,
            'billingCountry' => acc.BillingCountry,
            'mainContact' => 'Primary Contact', 
            'phone' => acc.Phone,
            'email' => acc.Email__c
        };
    }
}

This apex class retrieves account details based on the given accountId. It queries the Account object and returns a map of relevant account fields, including Name, Industry, Annual Revenue, Billing Address, Phone, and Email.

2. After creating the LWC component, enter the code below in the HTML file.

<template>
    <lightning-card title="Account Details with Single Active Accordion" icon-name="standard:account">
        <div class="slds-p-around_medium">
            <lightning-accordion active-section-name="accountInfo">
                <lightning-accordion-section name="accountInfo" label="Account Information">
                    <p><strong>Name:</strong> {account.name}</p>
                    <p><strong>Industry:</strong> {account.industry}</p>
                    <p><strong>Annual Revenue:</strong> {account.annualRevenue}</p>
                </lightning-accordion-section>
                <lightning-accordion-section name="billingDetails" label="Billing Details">
                    <p><strong>Billing Street:</strong> {account.billingStreet}</p>
                    <p><strong>Billing City:</strong> {account.billingCity}</p>
                    <p><strong>Billing Country:</strong> {account.billingCountry}</p>
                </lightning-accordion-section>
                <lightning-accordion-section name="contactDetails" label="Contact Details">
                    <p><strong>Main Contact:</strong> {account.mainContact}</p>
                    <p><strong>Phone:</strong> {account.phone}</p>
                    <p><strong>Email:</strong> {account.email}</p>
                </lightning-accordion-section>
            </lightning-accordion>
        </div>
    </lightning-card>
</template>

The above code defines an accordion, with only one section (accountInfo) active by default. It displays account details fetched from the controller class.

3. After this, enter the code below in the JS file of the LWC component.

import { LightningElement, api, wire } from 'lwc';
import getAccountDetails from '@salesforce/apex/AccountController.getAccountDetails';

export default class AccountDetailsSingle extends LightningElement {

    @api recordId;
    account = {};
    error;

    @wire(getAccountDetails, { accountId: '$recordId' })
    wiredAccount({ error, data }) {
        if (data) {
            this.account = data;
            this.error = undefined;
        } else if (error) {
            this.error = error;
            this.account = {};
            console.error('Error fetching account:', error);
        }
    }
}

It fetches account details from the Apex controller using @wire, binds the fetched data to the account variable, and handles errors.

4. To make the LWC component visible to the lighting page, enter the below page in the meta.xml file.

<isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
    </targets>

5. Now deploy the LWC component to the lightning record page. There, you will see the accordion with a single active section.

Account details With Accordion LWC in Salesforce

This way, we can add an accordion with a single active section to display the account information using Lightning Web Component.

Accordion With a Multiple Active Section to Display Account Information

To create an accordion with a multiple active section to display account information, create an LWC component and follow the steps below.

We will use the controller class we created in the above steps to fetch the account details.

Now, follow the steps below to create an accordion with multiple active sections.

1. Create an LWC component and enter the below code in the HTML file. This allows multiple sections to be open at the same time by using allow-multiple-sections-open. It also tracks currently open sections dynamically.

<template>
    <lightning-card title="Account Details Multiple Active Sections" icon-name="standard:account">
        <div class="slds-p-around_medium">
            <lightning-accordion 
                allow-multiple-sections-open 
                active-section-name={activeSections}
                onsectiontoggle={handleSectionToggle}>
                <lightning-accordion-section name="accountInfo" label="Account Information">
                    <p><strong>Name:</strong> {account.name}</p>
                    <p><strong>Industry:</strong> {account.industry}</p>
                    <p><strong>Annual Revenue:</strong> {account.annualRevenue}</p>
                </lightning-accordion-section>
                <lightning-accordion-section name="billingDetails" label="Billing Details">
                    <p><strong>Billing Street:</strong> {account.billingStreet}</p>
                    <p><strong>Billing City:</strong> {account.billingCity}</p>
                    <p><strong>Billing Country:</strong> {account.billingCountry}</p>
                </lightning-accordion-section>
                <lightning-accordion-section name="contactDetails" label="Contact Details">
                    <p><strong>Main Contact:</strong> {account.mainContact}</p>
                    <p><strong>Phone:</strong> {account.phone}</p>
                    <p><strong>Email:</strong> {account.email}</p>
                </lightning-accordion-section>
            </lightning-accordion>
            <p class="slds-m-top_small">Currently Open Sections: {openSectionsDisplay}</p>
        </div>
    </lightning-card>
</template>

2. After this, enter the code below in the JS file. We have used @track to keep track of active sections. The handleSectionToggle method updates activeSections and displays currently open sections.

import { LightningElement, track, api } from 'lwc';
import getAccountDetails from '@salesforce/apex/AccountController.getAccountDetails';

export default class AccountDetailsMultiple extends LightningElement {
    @api recordId;
    @track account = {};
    @track activeSections = ['accountInfo', 'billingDetails'];
    @track openSectionsDisplay = 'Account Information, Billing Details';

    connectedCallback() {
        getAccountDetails({ accountId: this.recordId })
            .then(result => {
                this.account = result;
            })
            .catch(error => {
                console.error('Error fetching account:', error);
            });
    }

    handleSectionToggle(event) {
        const openSections = event.detail.openSections;
        this.activeSections = openSections;
        const sectionLabels = {
            'accountInfo': 'Account Information',
            'billingDetails': 'Billing Details',
            'contactDetails': 'Contact Details'
        };
        this.openSectionsDisplay = openSections.length > 0 
            ? openSections.map(name => sectionLabels[name]).join(', ') 
            : 'None';
    }
}

4. After this, expose the LWC component to the lightning page using the code below.

<isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
    </targets>

5. Deploy the LWC component to the lightning page, and there we can expand or collapse multiple sections simultaneously in the LWC component.

This way, we can add an accordion with multiple sections enabled to expand and display the account information using Lightning Web Component.

Conclusion

In this Salesforce tutorial, we have learned about the accordion feature. Using the lightning-accordion and lightning-accordion-section, we have created Lightning Web Components with accordions with either a single active section or multiple active sections, depending on our requirements.

To make a default section active, we used active-section-name, and to make multiple sections active, we used allow-multiple-sections-open.

We also took a real-time example, displaying the single and multiple active section accordion in the account record page to display the account information.

Salesforce Reader