Collapsible section Accordion Sample lightning component

How To Create Collapsible Section And Accordion In Lightning Component

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]

Collapsible section Accordion Sample lightning component
Collapsible Sections Output:

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

Collapsible section Accordion Sample lightning component
Accordion Sample Output:

 

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

    • 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, 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?

  • 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!

Leave a Reply