How To Create Expand/Collapse Sections In Salesforce Lightning Component
Hi guys, today in this post we will learn that how we can create dynamic reusable custom expandable / collapsible sections in salesforce lightning component.
From developer console >> file >> new >> Lightning Component
Lightning Component : collapseSections.cmp
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 |
<!-- Source : sfdcmonkey.com Date : 03/01/2019 API : 45.0 --> <aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" > <!--section 1 start--> <div class="slds-section slds-is-open" aura:id="fruitsSection"> <!--section header--> <h3 class="slds-section__title"> <button aria-controls="fruitsList" class="slds-button slds-section__title-action"> <span onclick="{!c.toggleSection}" data-auraId="fruitsSection"> <lightning:icon iconName="utility:switch" size="x-small" class="slds-section__title-action-icon slds-button__icon_left" alternativeText="button icon" /> </span> <span class="slds-truncate" title="Fruits">Fruits</span> </button> </h3> <!--section body--> <div class="slds-section__content" id="fruitsList"> <p>Apple</p> <p>Apricots</p> <p>Banana</p> <p>Cherimoya</p> <p>Grapefruit</p> </div> </div> <!--section 1 end--> <!--section 2 start--> <div class="slds-section slds-is-open" aura:id="VegetablesSection"> <!--section header--> <h3 class="slds-section__title"> <button aria-controls="VegetablesId" class="slds-button slds-section__title-action"> <span onclick="{!c.toggleSection}" data-auraId="VegetablesSection"> <lightning:icon iconName="utility:switch" alternativeText="button icon" size="x-small" class="slds-section__title-action-icon slds-button__icon_left"/> </span> <span class="slds-truncate" title="Vegetables">Vegetables</span> </button> </h3> <!--section body--> <div class="slds-section__content" id="VegetablesId"> <p>Broccoli</p> <p>Corn</p> <p>Pumpkin</p> <p>Tomato</p> <p>Beetroot</p> </div> </div> <!--section 2 end--> <!--section 3 start--> <div class="slds-section slds-is-open" aura:id="colorSection"> <!--section header--> <h3 class="slds-section__title"> <button aria-controls="VegetablesId" class="slds-button slds-section__title-action"> <span onclick="{!c.toggleSection}" data-auraId="colorSection"> <lightning:icon iconName="utility:switch" alternativeText="button icon" size="x-small" class="slds-section__title-action-icon slds-button__icon_left"/> </span> <span class="slds-truncate" title="Vegetables">Colors</span> </button> </h3> <!--section body--> <div class="slds-section__content" id="VegetablesId"> <p>Red</p> <p>Green</p> <p>Blue</p> </div> </div> <!--section 3 end--> </aura:component> |
-
Important : section aura:id and data-auraId attributes must be same. (check highlighted code )
JavaScript Controller : collapseSectionsController.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
/* * Source : sfdcmonkey.com * Date : 03/01/2019 * API : 45.0 */ ({ // common reusable function for toggle sections toggleSection : function(component, event, helper) { // dynamically get aura:id name from 'data-auraId' attribute var sectionAuraId = event.target.getAttribute("data-auraId"); // get section Div element using aura:id var sectionDiv = component.find(sectionAuraId).getElement(); /* The search() method searches for 'slds-is-open' class, and returns the position of the match. * This method returns -1 if no match is found. */ var sectionState = sectionDiv.getAttribute('class').search('slds-is-open'); // -1 if 'slds-is-open' class is missing...then set 'slds-is-open' class else set slds-is-close class to element if(sectionState == -1){ sectionDiv.setAttribute('class' , 'slds-section slds-is-open'); }else{ sectionDiv.setAttribute('class' , 'slds-section slds-is-close'); } } }) |
- check code comments.
TestApp :
From developer console >> file >> new >> Lightning Application
|
1 2 3 4 5 6 7 8 |
<aura:application extends="force:slds"> <c:collapseSections/> <!-- here c: is org. default namespace prefix--></span> </aura:application> |
Output :
Other popular Post :
- How To Use jQuery DataTable Plugin In Salesforce Lightning Component -: Sample
- Powerful Lightning Datatable base component – Example Using Fieldset
- Custom Data Table With Inline Editing In Salesforce Lightning Component – Sample
- Add Delete Row Dynamic In Lightning Component : Sample Code
- Add Multiple Child Records to Parent Object With Lightning Component
Like our facebook page for new post updates. & Don’t forget to bookmark this site for your future reference.
if you have any suggestions or issue with it, you can post in comment box.
Happy Learning 
3 comments
Thanks , it really helpful!!
Really amazing content
This looks great. Can you create a global expand/collapse button in SF?
For example – if Fruits, Vegetables and Colors are all expanded, can there be 1 button to collapse all of them?