How To Create Collapsible Section And Accordion In Lightning Component
Hi guys,
Collapsible sections OR Accordion are useful when you want to show and hide large amount of content in your salesforce lightning component.
Today in this post we are going to create a sample collapsible section And a sample Accordion in salesforce lightning.
Part 1 : Collapsible Section Sample [Multiple selection]
From developer console >> file >> new >> Lightning Component
Lightning Component [collapseSec.cmp]
<aura:component > <div class="slds-p-around--large"> <div class="slds-page-header" style="cursor: pointer;" onclick="{!c.sectionOne}"> <section class="slds-clearfix"> <div class="slds-float--left "> <lightning:icon class="slds-show" aura:id="articleOne" iconName="utility:add" size="x-small" alternativeText="Indicates add"/> <lightning:icon class="slds-hide" aura:id="articleOne" iconName="utility:dash" size="x-small" alternativeText="Indicates dash"/> </div> <div class="slds-m-left--large">Section 1</div> </section> </div> <div class="slds-hide slds-p-around--medium" aura:id="articleOne"> section one is ready.section one is ready.section one is ready. section one is ready.section one is ready.section one is ready. section one is ready.section one is ready.section one is ready. </div> <div class="slds-page-header" style="cursor: pointer;" onclick="{!c.sectionTwo}"> <section class="slds-clearfix"> <div class="slds-float--left"> <lightning:icon class="slds-show" aura:id="articleTwo" iconName="utility:add" size="x-small" alternativeText="Indicates add"/> <lightning:icon class="slds-hide" aura:id="articleTwo" iconName="utility:dash" size="x-small" alternativeText="Indicates dash"/> </div> <div class="slds-m-left--large">Section 2</div> </section> </div> <div class="slds-hide slds-p-around--medium" aura:id="articleTwo"> section Two is ready.section Two is ready.section Two is ready. section Two is ready.section Two is ready.section Two is ready. section Two is ready.section Two is ready.section Two is ready. </div> <div class="slds-page-header" style="cursor: pointer;" onclick="{!c.sectionThree}"> <section class="slds-clearfix"> <div class="slds-float--left"> <lightning:icon class="slds-show" aura:id="articleThree" iconName="utility:add" size="x-small" alternativeText="Indicates add"/> <lightning:icon class="slds-hide" aura:id="articleThree" iconName="utility:dash" size="x-small" alternativeText="Indicates dash"/> </div> <div class="slds-m-left--large">Section 3</div> </section> </div> <div aura:id="articleThree" class="slds-hide slds-p-around--medium"> section Three is ready.section Three is ready.section Three is ready. section Three is ready.section Three is ready.section Three is ready. section Three is ready.section Three is ready.section Three is ready. </div> <div class="slds-page-header" style="cursor: pointer;" onclick="{!c.sectionFour}"> <section class="slds-clearfix"> <div class="slds-float--left"> <lightning:icon class="slds-show" aura:id="articleFour" iconName="utility:add" size="x-small" alternativeText="Indicates add"/> <lightning:icon class="slds-hide" aura:id="articleFour" iconName="utility:dash" size="x-small" alternativeText="Indicates dash"/> </div> <div class="slds-m-left--large">Section 4</div> </section> </div> <div aura:id="articleFour" class="slds-hide slds-p-around--medium"> section Four is ready.section Four is ready.section Four is ready. section Four is ready.section Four is ready.section Four is ready. section Four is ready.section Four is ready.section Four is ready. </div> </div> </aura:component>
JavaScript Controller [collapseSecController.js]
({ sectionOne : function(component, event, helper) { helper.helperFun(component,event,'articleOne'); }, sectionTwo : function(component, event, helper) { helper.helperFun(component,event,'articleTwo'); }, sectionThree : function(component, event, helper) { helper.helperFun(component,event,'articleThree'); }, sectionFour : function(component, event, helper) { helper.helperFun(component,event,'articleFour'); }, })
JavaScript Helper [collapseSecHelper.js]
({ helperFun : function(component,event,secId) { var acc = component.find(secId); for(var cmp in acc) { $A.util.toggleClass(acc[cmp], 'slds-show'); $A.util.toggleClass(acc[cmp], 'slds-hide'); } }, })
From developer console >> file >> new >> Lightning Application
demo.app [Lightning Application]
<aura:application extends="force:slds"> <c:collapseSec/> <!-- here c: is org. default namespace prefix--> </aura:application>
Part 2 : Accordion Sample [single selection] Using CSS
From developer console >> file >> new >> Lightning Component
Lightning Component [AccordionSec.cmp]
<aura:component> <div class="slds-m-around--medium"> <section id="accordion"> <div> <input type="radio" checked="checked" name="accordion-role" id="colorId" /> <label for="colorId">Color Names</label> <article> <div class="slds-p-around--medium"> <ol> <li>Red</li> <li>Blue</li> <li>Green</li> </ol> </div> </article> </div> <div> <input type="radio" name="accordion-role" id="animalId" /> <label for="animalId">Animals Name</label> <article> <div class="slds-p-around--medium"> <ol> <li>Tiger</li> <li>Dog</li> <li>cat</li> </ol> </div> </article> </div> <div> <input type="radio" name="accordion-role" id="fruitsId" /> <label for="fruitsId">Fruits Name</label> <article> <div class="slds-p-around--medium"> <ol> <li>Apple</li> <li>Banana</li> <li>Mango</li> </ol> </div> </article> </div> </section> </div> </aura:component>
Style [AccordionSec.css]
.THIS #accordion input { display: none; } .THIS #accordion label { background: #f7f9fb; border-radius: 4px; cursor: pointer; display: block; margin-bottom: 2px; padding: 4px 16px; z-index: 20; border:1px solid #eef2f6; } .THIS #accordion label:hover { background: #eef2f6; } .THIS #accordion input:checked + label { background: #eef2f6; border-bottom-right-radius: 0; border-bottom-left-radius: 0; color: black; margin-bottom: 0; } .THIS #accordion article { background: white; height:0px; overflow:hidden; z-index:10; } .THIS #accordion input:checked ~ article { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; height: auto; margin-bottom: 2px; }
From developer console >> file >> new >> Lightning Application
demo.app [Lightning Application]
<aura:application extends="force:slds"> <c:AccordionSec/> <!-- here c: is org. default namespace prefix--> </aura:application>
Some Useful Resources :
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 🙂
12 comments
Hi SFDC Monkey!
I have used your expanding section code and it works well. I am wondering why you did not use the Expandable Section example from lightningdesignsystem.com
How to use “Part 1 : Collapsible Section Sample [Multiple selection]” to toggle dynamic components? My implementation toggles all the divs generated dynamically.
How to use “Part 1 : Collapsible Section Sample [Multiple selection]” to toggle dynamic components? My implementation toggles all the divs generated dynamically.
Hi Daniel were you able to implement using lightningdesignsystem.com . I am trying to implement that.
Hi, I am using “Part 1 : Collapsible Section Sample [Multiple selection]” for showing and hiding Dynamic component created at runtime. However, I am not able to toggle the class “independently” because of static “aura:id=articleOne”. The current code expands or collapses All divs.
How can I toggle class for dynamic components?
have you implemented this or not ???
You will have to create a child component for the dynamic components and include that in your parent component.
Please do this dynamically, on click + it should display contacts related to account, on click – it should collapse
Please do this dynamically, on click + it should display contacts related to account, on click – it should collapse
Thank you for the wonderful post. Though I did manage to figure it out but It would have been great if this post(or maybe a separate post) could cover handling content within div that might be dynamically generated using an iterator.
The Accordian post works for the most part except that it won’t let us do multiple selection (afaik).
Thanks again!
Is it possible to close Section 1 when I press Section 2?