Accordion in Salesforce Lightning Web Components

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 organise 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 an accordion in the LWC components, which 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 a 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 code below in the JS file.

import { LightningElement } from 'lwc';

export default class AccordionSingle extends LightningElement {}

This 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.

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.

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

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 code below 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.

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 an 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 steps below.

1. We will display the account details in an 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 page below 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.

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 multiple active sections 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 code below 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';
    }
}

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

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

4. 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.

You may also like to read:

• Decorators in Salesforce Lightning Web Component(LWC)
• Display Toast Notifications in Lightning Web Components (LWC)
• Add Toggle Button For LWC Lightning Datatable
• Salesforce LWC Lightning Data Table With Search Bar
• Create Quick Actions With Lightning Web Components in Salesforce

Abhijeet

Abhijeet is a skilled Salesforce developer with experience in developing and integrating dashboards, data reports, and Salesforce applications. He is also skilled at optimizing processes and flow automation processes, coding, and executing complex project architecture. Read more about us | LinkedIn Profile.