Working with “Lightning Accordion” Component

9 min readDec 8, 2021

Hiding & Showing Content

Hello Friends, don’t get confused with the cover image of this blog. I am not going to tell you “How to Play the Accordion”. Definitely not until I learned how to play it.

In fact, through this blog, I am going to share how to work with Lightning Accordion Component. Yes, the LWC component. So if you’re a Salesforce Developer or want to become one. You might need this Lightning Web Component (LWC) somewhere in your app.

This blog will tell you -

What is Lightning Accordion?
Where to use Lightning Accordion?
How to use Lightning Accordion?
Attributes for Lightning Accordion
Different ways of using Lightning Accordion.
Code Repository links for Code Snippet.

So Without wasting any time further let’s proceed…

What is Lightning Accordion?

Lightning Accordion is a Lightning Web Component that can be used to show or hide a large amount of content. It is one of the commonly used components in websites and I am sure whether you know the name or not but you might have come across this component a lot of time. One basic example of Accordion is shown below-

Here, “Build Relevant Skills”, “Making Complex Simpler”, “Learning while Doing” and “Information in Chunks” is Lightning Accordions containing content as Lightning Accordion Section. When a user clicks on any specific Accordion in the group then the corresponding Lightning Accordion Section gets visible, hiding the rest of them.

Lightning Web Component (LWC) provides us with two tags for working with Lightning Accordion. These tags are-

lightning-accordion
lightning-accordion-section

So now, when you know What Lightning Accordion is? You are now ready to understand the use case where you can utilize Lightning Accordion.

Where to Use Lightning Accordion?

Well, the Lightning Accordion can be used at many places on our App. I have seen various websites utilizing Accordion for various purposes.

To show FAQs or Question/Answer section, where Questions are represented by Lightning Accordion Tag and Answers by Lightning Accordion Section Tag.
To show Sections/Units and Tutorials/Chapters, especially by Learning Platforms, where Units are represented by Lightning Accordion Tag and Chapters by Lightning Accordion Section Tag.
To show Terms and Definition of terms, where Terms are represented by Lightning Accordion Tag and Definitions by Lightning Accordion Section Tag.

and many other places. But if you will generalize these scenarios you will realize that Lightning Accordion can be used in any scenario where you are dealing with plenty of content but want’s the user to focus on only one specific content at a time.

Definitely, we shouldn’t use Lightning Accordion at places where you want to show all the content at the same time to the user.

Using Lightning Accordion is quite easy. Let’s see how to do that…

How to use Lightning Accordion?

In order to use the Lightning Accordion, we need those two tags which we have discussed a minute before. Use the following code to create a simple Lightning Accordion. Definitely, you can change the content and use the same Accordion anywhere you want to implement Lightning Accordion.

Well, don’t get overwhelmed with the number of tags. Let’s postmortem the code.

Clearly, you can see that we created a Parent Tag (<lightning-accordion>), containing a Child Tag (<lightning-accordion-section>). Lightning Accordion Section tag contains two attributes-

Name- To specify the unique name of the Accordion Section.
Label- To specify the label to be displayed on the Accordion Section

I know you all would be wondering how these tags would appear on the page. Please find the below screenshot for the same.

Different Outputs of Lightning According

So, now when we understood the What, When and How about Lightning Accordion. We are able to enhance our knowledge about it. So let’s proceed…

Attributes for Lightning Accordion

Attributes are the entities that we provide to tags in a “name : value” pair to enhance the capability of a Tag. Both the “lightning-accordion” and “lightning-accordion-section” provides us with some attributes to enhance their capabilities.

Lightning Accordion Attributes

active-section-name:
- Expands the specified accordion sections.
- Pass in a string for a single section or a list of section names.
- Section names are case-sensitive.
- To support multiple expanded sections, include allow-multiple-sections-open in your markup.
- By default, only the first section in the accordion is expanded.
allow-multiple-sections-open:
- If present, the accordion allows multiple open sections.
- Otherwise, opening a section closes another that’s currently open.
title- Displays tooltip text when the mouse moves over 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.
title- Reserved for internal use.

Obviously, these attributes allow us to implement them in various ways and our next section is on that only. So let’s see different ways of using Lightning Accordion.

Different Ways of Using Lightning Accordion

Type # 1- Lightning Accordion with Multiple Section Open

Now, for the first variant of the Lightning Accordion, we will use the “allow-multiple-sections-open” and “title” attributes. Please find the code given below:

Lightning Accordion with Multi-Open and Title

As you can see from the first line that we have used two attributes for the Lightning Accordion tag. Due to the “allow-multiple-sections-open” attribute now the user can open more than one accordion section at a time. Secondly, now no accordion section will be shown by default, i.e. all the accordion sections will be hidden by default. Due to the title attribute, it will show the specified text when the mouse hovers over it. The output of the above code is shown below.

Output for the Multi-Open Code for Accordion

For the second variant of Lightning Accordion, we are going to open a specific accordion by clicking on buttons. For this variant, we will see different code snippets for different purposes.

Type # 2- Lightning Accordion Operated with Buttons

As you can see for this variant we have removed the “allow-multiple-sections-open” attribute and have used the “active-section-name” attribute. The value of the active-section-name attribute depends on a variable.

Here in our code, we have used a button-group (group of buttons) as well to select a specific accordion section. We’ll discuss button groups in detail in a different blog, but for now, just understand they are a collection of buttons and we are calling a JS (JavaScript) function on the click of any of these buttons.

Button group to Select specific Accordion Section

As you can clearly see, the label of buttons depends upon the name attribute of the Lightning Accordion Section. Notice the “onclick” attribute we have used with all the buttons and the value provided is a JS function name. So, whenever a user will click on a specific button the handleButtonClick JS function will be called. Now let’s see what the JS function is doing.

JS file of the Lightning Accordion Component

As shown here, handleButtonClick() function is actually assigning the button label to “activeSection” variable. If you remember it's the same variable that we have used with the “active-section-name” attribute of the Lightning Accordion tag. Hence, when you will click on a button, the button label will be the active-section-name and that’s why the label provided to the button is the same as the name provided to different Lightning Accordion Sections. Now let’s see the output for the above code snippets.

Outputs’ Screenshots when clicking different Buttons

Type # 3- Lightning Accordion with Conditional Accordion Section

Now, this variant of Lightning Accordion is really interesting. In this type of Lightning Accordion, we have conditional accordion sections. It means that there would be few accordion sections that can be shown or hidden depending upon some condition.

You might be wondering how it's a different variant all lightning accordions are used to show or hide sections only. Actually, here we are not just showing or hiding a section content, in fact, we are showing and hiding the whole accordion section itself.

So let’s see what I meant, but practically…

Lightning Accordion with conditional Accordion Sections

As you can see it is just like the previous Lightning Accordion but with a slight change. Here in the highlighted section, you can see that we have used a <template if:true={}> tag. Now, this tag actually renders its child only when the variable specified to the if:true attribute returns true and hides (do not render) the child components if the variable results in false.

So, how we are making these variables’ values true or false? The answer is very simple, we are changing the value of these variables on the click event of two buttons.

Buttons to toggle Lightning Accordion Section to Show or Hide

As you can see now we are having only two buttons in the button group with labels “TOGGLE MARKETING” and “TOGGLE ANALYTICS” respectively. Both these buttons call their own handler methods on the click event. Definitely, the logic of showing or hiding the accordion section is residing in the JS file of this LWC.

JS file for the current Lightning Web Component

As you can see the JS file contains marketingEnabled and analyticsEnabled variables initialized with false. In the handler methods of button click, we are checking whether the current value of the variables are true or false, and depending upon the current values of these variables we are updating these variables.

So, what sort of output this accordion will give. Let’s see…

Different Output Scenarios with current Lightning Accordion Variant

As you can see the output is shown with different scenarios. So let’s see them one by one.

Scenario # 1- By default view of the Lightning Accordion.
Scenario # 2- By clicking on the TOGGLE MARKETING button on the default view (Scenario # 1).
Scenario # 3- By clicking on the TOGGLE MARKETING button on “Scenario # 2”.
Scenario # 4- By clicking on both the buttons on “Scenario # 1”.
Scenario # 5- By clicking on the TOGGLE MARKETING button on “Scenario # 4” or by clicking on the TOGGLE ANALYTICS on “Scenario # 1”.
Scenario # 6- By clicking on the TOGGLE ANALYTICS button on “Scenario # 5”.

Now, you might want to see the codes for doing your R&D (Research & Development) then please use the repo links provided in the next section.

Code Repository links for Code Snippet

So, friends that were all I wanted to share about Lightning Accordion, hope this blog is helpful for you in understanding and utilizing Lightning Accordion and Lightning Accordion Section.

See you soon with another blog on another Lightning Web Components.

Thanks & Happy Trailblazing

You can follow me on -

LinkedIn| Facebook | Twitter