How to Add Expand/Collapse Sections in Salesforce Lightning : Step-by-Step Guide

Creating user-friendly, interactive interfaces is crucial in Salesforce Lightning. Expand/Collapse sections allow users to hide or show content as needed, improving both the user experience and page performance. In Salesforce Lightning, this functionality can be implemented through built-in components like the Accordion, or through custom solutions using Lightning Web Components (LWC) and Aura Components.

What are Expand/Collapse Sections?

Expand/Collapse sections are interactive UI elements that can show or hide content when the user clicks on them. They are often used to reduce clutter on a page by hiding non-essential details unless requested by the user.

Why Use Expand/Collapse Sections in Salesforce Lightning?

• Improves Page Layout: Organizes information by only displaying relevant details when needed.
• Enhances User Experience: Users can focus on specific sections without being overwhelmed by too much information.
• Optimizes Performance: Only renders content when needed, reducing page load times.

Method 1: Using the Lightning Accordion Component

Overview of Accordion Component

Salesforce provides the Lightning Accordion component, which allows users to toggle sections on and off easily. It’s a simple and efficient way to implement collapsible sections without custom code.

Steps to Implement Lightning Accordion in Salesforce

1. Go to Setup and open the Lightning App Builder.
2. Choose the component or page where you want to add the expand/collapse functionality.
3. Drag the Lightning Accordion component from the left pane into your layout.
   
   

Accordion Component Example Code

<lightning-accordion allow-multiple-sections-open>
    <lightning-accordion-section name="section1" label="Section 1">
        <!-- Content for Section 1 -->
        <p>This is the content for Section 1.</p>
    </lightning-accordion-section>
    <lightning-accordion-section name="section2" label="Section 2">
        <!-- Content for Section 2 -->
        <p>This is the content for Section 2.</p>
    </lightning-accordion-section>
</lightning-accordion>

This will render an accordion with two collapsible sections.

Method 2: Custom Expand/Collapse Using Lightning Web Components (LWC)

For more flexibility or advanced customization, you can create your own expand/collapse functionality using Lightning Web Components.

Setting up Lightning Web Component

1. Create a new LWC component in your Salesforce org.
2. Set up the basic structure of your component.

Creating the Expand/Collapse Logic

You can manage the expand/collapse behavior using JavaScript to toggle the visibility of certain elements in your LWC.

Example Code for Custom LWC Expand/Collapse

Here’s an example of a simple LWC that creates an expand/collapse section.

HTML:

<template>
    <lightning-button label="Toggle Section" 
                       onclick={toggleSection}>
    </lightning-button>
    <div class={sectionClass}>
        <p>This content can be expanded or collapsed.</p>
    </div>
</template>

JavaScript:

import { LightningElement } from 'lwc';

export default class ExpandCollapseSection extends LightningElement {
    isExpanded = false;

    get sectionClass() {
        return this.isExpanded ? 'expanded' : 'collapsed';
    }

    toggleSection() {
        this.isExpanded = !this.isExpanded;
    }
}

CSS:

.expanded {
    display: block;
}
.collapsed {
    display: none;
}

This example uses a button to toggle the section’s visibility by changing the class between expanded and collapsed.

Method 3: Implementing Expand / Collapse Using Aura Components

For those still using Aura Components, you can also implement expand/collapse sections using standard Aura markup and controllers.

Overview of Aura Components in Salesforce

Aura components are an older framework compared to LWC, but they still support a wide range of use cases, including collapsible sections.

Steps to Implement Expand/Collapse in Aura Components

1. Create an Aura Component in Salesforce.
2. Define the logic for showing and hiding sections.
   
   

Example Code for Aura Expand/Collapse Functionality

Aura Component Markup:

<aura:component>
    <lightning:button label="Toggle Section" 
                      onclick="{!c.toggleSection}" />
    <aura:if isTrue="{!v.isExpanded}">
        <p>This section is now expanded!</p>
    </aura:if>
</aura:component>

Controller:

({
    toggleSection : function(component, event, helper) {
        let isExpanded = component.get("v.isExpanded");
        component.set("v.isExpanded", !isExpanded);
    }
})

This will allow for basic expand/collapse functionality in an Aura Component.

Best Practices for Expand/Collapse Sections in Salesforce Lightning

• Keep content concise to ensure faster loading times and better user experience.
• Minimize nested sections, as too many layers of expand/collapse can confuse users.
• Use clear labeling to help users understand what each section contains.
  
  

Common Issues and Troubleshooting

• Accordion not expanding or collapsing: Ensure that the section names are unique and the necessary JavaScript logic is in place.
• Performance issues: Avoid loading heavy content or large datasets inside collapsible sections.
  
  

Summary:

Expand/Collapse sections are a powerful way to optimize the layout and user experience in Salesforce Lightning. By using built-in components like the Lightning Accordion or custom-built solutions using LWC or Aura, you can create interactive and efficient interfaces that help users manage large datasets or complex page layouts.