How to Use Accordion in Salesforce Lightning Web Components (LWC)

How to Implement Accordion in Salesforce Lightning Web Components (LWC)

The Accordion is a popular UI component in Salesforce Lightning Web Components (LWC) that helps organize large amounts of content into collapsible sections. It enhances user experience by allowing users to expand and collapse panels, keeping the interface clean and easy to navigate.

What is Accordion in Salesforce?

An Accordion in Salesforce LWC is a container that holds multiple expandable panels. Users can click on a panel header to reveal or hide the content inside. Salesforce provides a built-in lightning-accordion base component to simplify this functionality with standard styling and behavior.

Why Use Accordion in Salesforce?

• Improves UI organization: Group related information in sections for better readability.
• Saves screen space: Content is hidden by default and shown only when needed.
• Enhances user experience: Users can easily access specific information without scrolling through long pages.
• Standard Salesforce styling: Ensures consistency with Lightning Design System.

How to Implement Accordion in Salesforce LWC

Follow these steps to create a simple accordion component using lightning-accordion:

1. Create a new Lightning Web Component.
2. Use the lightning-accordion and lightning-accordion-section tags in the HTML template.
3. Bind the accordion active section using JavaScript for interactivity (optional).

Sample Code

<template>
    <lightning-accordion allow-multiple-sections-open>
        <lightning-accordion-section name="A" label="Section A">
            <p>Content for section A goes here.</p>
        </lightning-accordion-section>
        <lightning-accordion-section name="B" label="Section B">
            <p>Content for section B goes here.</p>
        </lightning-accordion-section>
        <lightning-accordion-section name="C" label="Section C">
            <p>Content for section C goes here.</p>
        </lightning-accordion-section>
    </lightning-accordion>
</template>
            

Additional Features of Salesforce Accordion

• Allow multiple sections open: Set allow-multiple-sections-open to true for non-exclusive expansion.
• Control active sections programmatically: Bind active-section-name attribute to control which sections are open.
• Custom styling: Use Lightning Design System classes for appearance tweaks (without extra CSS in this blog).

Conclusion

The Salesforce Accordion component is a powerful way to improve your Lightning Web Components UI by organizing content efficiently. The built-in lightning-accordion base component makes it quick and easy to implement collapsible sections that align with Salesforce design standards. Use this feature to enhance usability and deliver a better user experience in your Salesforce apps.

Published on: September 20, 2025