How to Create Custom Accordion Expand, Collapse and Toggle Section in Lightning Component

Post Views: 3,244

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.

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

Other related post that would you like to learn in LWC

How to delete selected record on click button using deleteRecord of uiRecordApi in Lightning web component -LWC
How to create a custom form validation and display required Error message upon handle input change in Lightning web component – LWC
How to pass the color code value from a child LWC component to parent lightning aura component using LWC Custom Event & Dispatch Event
A small example of dispatch event where we define a custom event in child lightning web component and passing values from child component to parent component in — LWC
How to Communicate Between Parent to Child and Passing the Value from Parent Component to Child component in Lightning Web Component — LWC
Insert New Record in Custom Object and Navigate to the Record on Detail Page Using Apex class method in Lightning Web Component — LWC
How to Insert, Edit/Update record without apex class by help of the lightning data service using “lightning-record-form” in Lighting Web Component — LWC
Calling an apex method imperatively and fetching contact record from database without @wire and create lightning data-table

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>

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

<c:customAccordionCmp/>

</aura:application>

Step 2:- Create Lightning Component : customAccordionCmp.cmp

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>    
    </div>      
</aura:component>

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

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

</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>

</li>

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

</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>

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

</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>

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

</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>

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

</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>

</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');        
        }
        
	}
})

({

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;}

.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;}

Further post that would you like to learn

4 thoughts on “How to Create Custom Accordion Expand, Collapse and Toggle Section in Lightning Component”

Mohit Sharma

August 28, 2020 at 11:10 am

Thank you for this tutorial…
pooja

October 5, 2020 at 5:30 am

good code;
i found it very flexible
Sictech

November 23, 2020 at 10:03 am

thoughts on “How to Create Custom Accordion Expand, Collapse and Toggle Section in Lightning Component”
pinjara khubsurti kaa

December 14, 2020 at 2:54 pm

You’re a beautiful inspiration. It really helps me in any situation. Where I stuck. Many of my friends told me to comment there post but I stuck what I should comment. Finally I got your post it always help me. Thanks for the lovely post.

How to Create Custom Accordion Expand, Collapse and Toggle Section in Lightning Component

Files we used in this post example:-

customAccordionApp.app [Component Application File]

customAccordionCmp.cmp [Lightning Component File]

customAccordionCmpcontroller.js [JavaScript Controller]

customAccordionCmp.CSS [Style CSS]

Related Topics

4 thoughts on “How to Create Custom Accordion Expand, Collapse and Toggle Section in Lightning Component”

Leave a Comment Cancel reply

Files we used in this post example:-

customAccordionApp.app [Component Application File]

customAccordionCmp.cmp [Lightning Component File]

customAccordionCmpcontroller.js [JavaScript Controller]

customAccordionCmp.CSS [Style CSS]

Related Topics

4 thoughts on “How to Create Custom Accordion Expand, Collapse and Toggle Section in Lightning Component”

Leave a Comment Cancel reply

Please Contribute to Support If Some Value Added in Your Project or Website