Lightning Component : collapseSections.cmp
<aura:component implements=”force:appHostable” 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>
Note:- Section aura:id and data-auraId attributes must be same.
JavaScript Controller : collapseSectionsController.js
({
// 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’);
}
}
})
TestApp :
<aura:application extends=”force:slds”>
<c:collapseSections/>
<!– here c: is org. default namespace prefix–></span>
</aura:application>