How to Create Custom Accordion Expand, Collapse and Toggle Section in Lightning Component | create lightning component Accordion Expand/Collapse/Toggle section in salesforce lightning component

Hey guys, today in this post we are going to learn about how to create a custom accordion Expand Collapse and Toggle section using JavaScript in Salesforce lightning component.

Don’t forget to check out:- Create custom expand all/ collapse all for accordion section rows table based in lightning component Click Here For More Information

Files we used in this post example:-

customAccordionApp.app	Lightning Application	It is used for call the component to preview on browser.
customAccordionCmp.cmp	Lightning Component	It is used for create a accordion list item section.
customAccordionCmpcontroller.js	Lightning Component Controller	It is used for click functionality that is Expand Collapse and Toggle section in Lightning component.
customAccordionCmp.CSS	Component Style CSS	It is used for create custom Style CSS for Expandable/Collapsible & Toggle (Accordion) section.

Final Output

You can download file directly from github by Click Here.

👉 Download Free Ebook →

👉 Get Free Course →

Note:: – You will get an email, so put correct email and mobile number and BEGIN YOUR JOURNEY from Today!

Other related post that would you like to learn in Salesforce

Step 1:- Create Lightning Application : customAccordionApp.app

From Developer Console >> File >> New >> Lightning Application

customAccordionApp.app [Component Application File]

   <aura:application extends="force:slds">

```
    <c:customAccordionCmp/>
```
```
  </aura:application>
```

Step 2:- Create Lightning Component : customAccordionCmp.cmp

Note:: – You will get an email, so put correct email and mobile number and BEGIN YOUR JOURNEY from Today!

From Developer Console >> File >> New >> Lightning Component

customAccordionCmp.cmp [Lightning Component File]

   <aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >

```
    <div class="slds">
```

        <div class="slds-grid slds-wrap">

            <div class="slds-p-horizontal--medium slds-col slds-size_6-of-12">

                <ul class="slds-accordion w3webAccordion" id="w3webAccordionListOver">

                    <li class="slds-accordion__list-item" id="w3webListItem0">

                        <div class="slds-accordion__summary">

                            <h3 class="slds-summary-heading" name="w3webListItem0" onclick="{!c.accordionAction}">Editing, Saving and Removing rows Dynamically in Lightning component</h3>

                            <div class="accordionContent">

                                <div class="postImage">

                                <a href="https://www.w3web.net/edit-save-and-remove-rows-dynamically-in-lightning-component/">

                                    <img src="https://www.w3web.net/wp-content/uploads/2020/07/editDeleteSave.png" width="200" height="150"/>

```
                                </a>
```
```
                            </div> 
```

                                <p>In this post we are going to learn about that how to edit row, saving row or removing row dynamically in Salesforce lightning component.</p><br/>

                                <p>In this example we will customize the same component and achieve to the editing row, saving row and removing rows functionality of dynamically on Custom sObject by help of wrapper apex class and JavaScript Controller in lightning component...<span class="readMore"><a href="https://www.w3web.net/edit-save-and-remove-rows-dynamically-in-lightning-component/">Read more...</a></span></p>

```
                            </div>
```
```
                        </div>    
```
```
                    </li>
```
```
 
```

                    <li class="slds-accordion__list-item" id="w3webListItem1">

                        <h3 class="slds-summary-heading" name="w3webListItem1" onclick="{!c.accordionAction}"> How to validate child component from parent component</h3>

                        <div class="accordionContent">

                            <div class="postImage">

                                <a href="https://www.w3web.net/how-to-validate-child-component-from-parent-component/">

                                    <img src="https://www.w3web.net/wp-content/uploads/2020/08/stylishFormValidation.png" width="200" height="150"/>

```
                                </a>
```
```
                            </div> 
```

                            <p>In this post we are going to learn about how to validate child component from parent component on click button using aura method in Salesforce lightning component.</p><br/>

                            <p>Real time scenarios:- Create a custom and stylish form validation and validate child component from parent component using aura method in lightning component...<span class="readMore"><a href="https://www.w3web.net/how-to-validate-child-component-from-parent-component/">Read more...</a></span> </p>

                        </div>

```
                    </li>
```
```
 
```

                    <li class="slds-accordion__list-item" id="w3webListItem2">

                        <h3 class="slds-summary-heading" name="w3webListItem2" onclick="{!c.accordionAction}">Trigger to update count of child records with custom field of parent object.</h3>

                        <div class="accordionContent">

                             <div class="postImage">

                                <a href="https://www.w3web.net/roll-up-summary-trigger-on-custom-object/">

                                    <img src="https://www.w3web.net/wp-content/uploads/2020/08/employeeSizeTrigger.png" width="200" height="150"/>

```
                                </a>
```
```
                            </div>
```

                            <p>In this post we are going to learn about how to update count of child records with custom field value into parent object using trigger map list in Salesforce.</p><br/>

                            <p><strong>Real time scenarios:-</strong> Write a trigger on parent object where create a <strong>custom field</strong> as Employee (Number type).</p><br/>

                            <p>Or if user update the value of employee <strong>less then</strong> the total number of child records, in this case the child records should be <strong>exist only equal to </strong> employee size, rest records of child object should be automatic removed. <span class="readMore"><a href="https://www.w3web.net/update-count-of-child-record-based-on-parent-object-value/">Read more...</a></span></p>

                        </div>

```
                    </li>
```
```
 
```

                    <li class="slds-accordion__list-item" id="w3webListItem3">

                        <h3 class="slds-summary-heading" name="w3webListItem3" onclick="{!c.accordionAction}">Create rollup summary using Apex trigger on custom object</h3>

                        <div class="accordionContent">

                            <div class="postImage">

                                <a href="https://www.w3web.net/roll-up-summary-trigger-on-custom-object/">

                                    <img src="https://www.w3web.net/wp-content/uploads/2020/08/rollupSummary-trigger.png" width="200" height="150"/>

```
                                </a>
```
```
                            </div>
```

                            <p>In this post we are going to learn about How to create roll-up summary trigger for <b>count child records</b> on custom object using Apex trigger in Salesforce.</p><br/>

                            <p><strong>Real time scenarios:-</strong> Write a trigger on parent object where create a <strong>custom field</strong> as Employee (Number type).</p><br/>

                            <p><strong>Real time scenarios:-</strong> Write a roll-up summary trigger for count child records on custom parent object. Create a custom field (Number Type) on parent object, <strong>calculate the total number</strong> of related <strong>child records</strong> and put into them...<span class="readMore"><a href="https://www.w3web.net/roll-up-summary-trigger-on-custom-object/">Read more...</a></span></p>

                        </div>

```
                    </li>
```
```
 
```

                    <li class="slds-accordion__list-item" id="w3webListItem4">

                        <h3 class="slds-summary-heading" name="w3webListItem4" onclick="{!c.accordionAction}">How to fetch picklist values from apex controller in lightning component</h3>

                        <div class="accordionContent">

                            <div class="postImage">

                                <a href="https://www.w3web.net/roll-up-summary-trigger-on-custom-object/">

                                    <img src="https://www.w3web.net/wp-content/uploads/2020/07/picklistValue.png" width="200" height="150"/>

```
                                </a>
```
```
                            </div>
```

                            <p>In this post we are going to learn about how to retrieve Picklist values from Apex controller in Lightning Component...<span class="readMore"><a href="https://www.w3web.net/fetch-picklist-values-dynamically/">Read more...</a></span></p>

                        </div>

```
                    </li>
```
```
 
```
```
                </ul>
```
```
            </div>  
```
```
        </div>  
```
```
<br/> <br/>
```
```
   
```

<div style="border:1px #ddd solid; padding:10px; background:#eee; margin:40px 0;">

```
 
```

            <p data-aura-rendered-by="435:0"><img src="https://www.w3web.net/wp-content/uploads/2021/05/thumbsUpLike.png" width="25" height="25" style="vertical-align:top; margin-right:10px;" data-aura-rendered-by="436:0"><strong data-aura-rendered-by="437:0"><span style="font-size:16px; font-style:italic; display:inline-block; margin-right:5px;">Don't forget to check out:-</span><a href="https://www.w3web.net/" target="_blank" rel="noopener noreferrer" style="text-decoration:none;" data-aura-rendered-by="440:0">An easy way to learn step-by-step online free Salesforce tutorial, To know more Click  <span style="color:#ff8000; font-size:18px;" data-aura-rendered-by="442:0">Here..</span></a></strong></p>

```
 
```
```
            <br/><br/>
```

            <p data-aura-rendered-by="435:0"><img src="https://www.w3web.net/wp-content/uploads/2021/07/tickMarkIcon.png" width="25" height="25" style="vertical-align:top; margin-right:10px;" data-aura-rendered-by="436:0"><strong data-aura-rendered-by="437:0"><span style="font-size:17px; font-style:italic; display:inline-block; margin-right:5px; color:rgb(255 128 0);">You May Also Like →</span> </strong></p>

            <div style="display:block; overflow:hidden;">

                <div style="width: 50%; float:left; display:inline-block">

                    <ul style="list-style-type: square; font-size: 16px; margin: 0 0 0 54px; padding: 0;">

                        <li><a href="https://www.w3web.net/lwc-get-set-lightning-checkbox-value/" target="_blank" rel="noopener noreferrer">How to get selected checkbox value in lwc</a></li>

                        <li><a href="https://www.w3web.net/display-account-related-contacts-in-lwc/" target="_blank" rel="noopener noreferrer">how to display account related contacts based on AccountId in lwc</a></li>

                        <li><a href="https://www.w3web.net/create-lightning-datatable-row-actions-in-lwc/" target="_blank" rel="noopener noreferrer">how to create lightning datatable row actions in lwc</a></li>

                        <li><a href="https://www.w3web.net/if-and-else-condition-in-lwc/" target="_blank" rel="noopener noreferrer">how to use if and else condition in lwc</a></li>

                        <li><a href="https://www.w3web.net/get-selected-radio-button-value-and-checked-default-in-lwc/" target="_blank" rel="noopener noreferrer">how to display selected radio button value in lwc</a></li>

```
                    </ul>
```
```
            </div>
```
```
 
```

            <div style="width: 50%; float:left; display:inline-block">

                    <ul style="list-style-type: square; font-size: 16px; margin: 0 0 0 54px; padding: 0;">

                        <li><a href="https://www.w3web.net/display-account-related-contacts-lwc/" target="_blank" rel="noopener noreferrer">display account related contacts based on account name in lwc</a></li>

                        <li><a href="https://www.w3web.net/create-lightning-datatable-row-actions-in-lwc/" target="_blank" rel="noopener noreferrer">how to insert a record of account Using apex class in LWC</a></li>

                        <li><a href="https://www.w3web.net/fetch-picklist-values-dynamic-in-lwc/" target="_blank" rel="noopener noreferrer">how to get picklist values dynamically in lwc</a></li>

                        <li><a href="https://www.w3web.net/edit-save-and-remove-rows-dynamically-in-lightning-component/" target="_blank" rel="noopener noreferrer">how to edit/save row dynamically in lightning component</a></li>

                        <li><a href="https://www.w3web.net/update-parent-object-from-child/" target="_blank" rel="noopener noreferrer">update parent field from child using apex trigger</a></li>

```
                    </ul>
```
```
                </div>
```

               <div style="clear:both;"></div>

```
               <br/>
```

                <div class="youtubeIcon">

                    <a href="https://www.youtube.com/channel/UCW62gTen2zniILj9xE6LmOg" target="_blank" rel="noopener noreferrer"><img src="https://www.w3web.net/wp-content/uploads/2021/11/youtubeIcon.png" width="25" height="25" style="vertical-align:top; margin-right:10px;"/> <strong>TechW3web:-</strong> To know more, Use this <span style="color: #ff8000; font-weight: bold;">Link</span> </a>

```
                </div>
```
```
    </div>
```
```
 
```
```
</div>
```
```
 
```
```
  
```
```
 
```
```
    </div>      
```
```
</aura:component>
```

Step 3:- Create Lightning Component : customAccordionCmpcontroller.js

From Developer Console >> File >> New >> Lightning Component >> JavaScript Controller

customAccordionCmpcontroller.js [JavaScript Controller]

```
   ({
```

	accordionAction : function(component, event, helper) {

```
		var thisObj = event.target.name;
```

        var w3webAccordionListOver = document.getElementById('w3webAccordionListOver');

        var accordionListAll =  w3webAccordionListOver.querySelectorAll('.slds-accordion__list-item');

        //alert(accordionListAll.length);

```
 
```

        var conainActive = document.getElementById(thisObj).classList.contains('activeRow');

        for(var i=0; i<accordionListAll.length; i++){

            accordionListAll[i].classList.remove('activeRow');

```
        }
```
```
 
```
```
        if(conainActive == true){
```

            document.getElementById(thisObj).classList.remove('activeRow');

```
        }else{
```

            document.getElementById(thisObj).classList.toggle('activeRow');

```
        }
```
```
 
```
```
	}
```
```
})
```

Step 4:- Create Lightning Component Style: customAccordionCmp.CSS

From Developer Console >> File >> New >> Lightning Component >> Component Style CSS

customAccordionCmp.CSS [Style CSS]

```
   .THIS {
```
```
    background:#fff !important;
```
```
 }
```
```
 
```

.THIS .w3webAccordion {margin:0; padding:0; list-style:none;}

.THIS .w3webAccordion li{padding:5px 0 5px 0;}

.THIS .w3webAccordion li .slds-summary-heading{display:block; padding:0 0 0 20px; font-size:17px; position:relative;}

.THIS .w3webAccordion li .slds-summary-heading:before {content:''; width:17px; height:17px; display:inline-block; background:url(/resource/SLDS2016/assets/icons/utility/chevronright_60.png) no-repeat left top; background-size:cover; cursor: pointer; position:absolute; left:0; top:5px;}

```
 
```

.THIS .w3webAccordion li .slds-summary-heading:hover{color:#04a5ca; cursor:pointer;}

.THIS .w3webAccordion .slds-accordion__summary{display:initial;}

.THIS .w3webAccordion .slds-accordion__list-item .accordionContent{display:none; overflow:hidden;}

.THIS .w3webAccordion li.activeRow .slds-summary-heading{color:#04a5ca;}

.THIS .w3webAccordion li.activeRow .accordionContent{display:block; padding:5px 0 5px 20px; font-size:14px;}

.THIS .w3webAccordion li.activeRow .accordionContent .postImage{display: inline-block; float: left; margin-right: 10px;}

.THIS .w3webAccordion li.activeRow .slds-summary-heading:before {content:''; width:18px; height:17px; display:inline-block; background:url(/resource/SLDS2016/assets/icons/utility/chevrondown_60.png) no-repeat left top; background-size:cover; cursor: pointer; position:absolute; left:0; top:5px;}

.THIS .readMore{font-size:14px; font-weight:bold; display:inline-block; padding:0 0 0 10px;}

.THIS .readMore a{color:#ff0000; text-decoration:none;}

.THIS .readMore a:hover{color:#04a5ca; text-decoration:underline;}

TechW3web:- To know more, Use this Link

Further post that would you like to learn in Salesforce

The Sitemap to Find all Published Post of The Tutorial w3web.net Click Here For More Information

TechW3web:- To know more, Use this Link

FAQ (Frequently Asked Questions)

What is accordion in Salesforce?

An accordion allows a user to toggle the display of a section of content. Salesforce Lightning Accordion: lightning accordion component groups related content in a single container. Only one accordion section is expanded at a time. When you select a section, it's expanded or collapsed.

What is collapsible section in Salesforce?

Collapsible sections let users collapse or expand sections on their record detail pages by using the arrow icon next to the section heading. Sections remain expanded or collapsed until the user changes the settings for that tab.

What is collapse list?

A collapsible list will show and hide a given section of content when its heading is clicked. The collapsible list will appear initially as a series of Heading 5s or Heading 6s with an arrow next to each.

Vijay Kumar

Hi, This is Vijay Kumar behind the admin and founder of w3web.net. I am a senior software developer and working in MNC company from more than 8 years. I am great fan of technology, configuration, customization & development. Apart of this, I love to write about Blogging in spare time, Working on Mobile & Web application development, Salesforce lightning, Salesforce LWC and Salesforce Integration development in full time. [Read full bio] | | The Sitemap where you can find all published post on w3web.net

How to Create Custom Accordion Expand, Collapse and Toggle Section in Lightning Component | create lightning component Accordion Expand/Collapse/Toggle section in salesforce lightning component

Files we used in this post example:-

Note:: – You will get an email, so put correct email and mobile number and BEGIN YOUR JOURNEY from Today!

customAccordionApp.app [Component Application File]

Note:: – You will get an email, so put correct email and mobile number and BEGIN YOUR JOURNEY from Today!

customAccordionCmp.cmp [Lightning Component File]

customAccordionCmpcontroller.js [JavaScript Controller]

customAccordionCmp.CSS [Style CSS]

What is accordion in Salesforce?

What is collapsible section in Salesforce?

What is collapse list?

Related Topics | You May Also Like

Note:: – You will get an email, so put correct email and mobile number and BEGIN YOUR JOURNEY from Today!

Vijay Kumar

Leave a Comment Cancel reply