Salesforce Lightning Component – expand and collapsable panel example

In previous blog post, we saw that how Lightning component bundles are related to each other and how to create simple Hello World component.

In this post, we will create very simple yet powerful reusable lightning component for collapse and expand panel. This time, we will skip basics of lightning and directly start with code.

Complete component is build with plain javascript and CSS, no library used.

Lightning CollapsiblePanel Component - Collapsed
Lightning CollapsiblePanel Component – Collapsed
Lightning CollapsiblePanel Component - Expanded
Lightning CollapsiblePanel Component – Expanded


CollapsiblePanel.cmp [Component]

In above component, I have used body parameter as facet so that any lightning component can be used in body.

In above code, we are passing <ui:message> lightning component as a body, to show how one lightning component can be passed as parameter to another component.

<aura:set> is used to set facet in custom lightning component created.


  1. Hi Jit,
    This blog is very easy to understand and to clear the concept !!

    Also I tried with the change in function ToggleCollapse in IF condition :
    ( parElement.childNodes[i].classList[0] == “container” )
    instead of

    (parElement.childNodes[i].className && parElement.childNodes[i].className.indexOf(“container”) > -1)

    This gives me same result. 🙂

    Thanks & Regards,

    1. Thats nice Jayshree. In your code you are expecting first class will always “Container” , what if sequence change ? I am afraid in that case code will not work.

  2. Hi Jit,

    Thanks for wonderful post !!.
    For me above code is not working. I tried above code and found ‘curElement.innerText’ is not picking ‘[ + ]’ or
    ‘[ -]’ so it is not showing container. Could you please help me out ?

    Best – Nagendra

  3. I used the sample code as it is, however found the curElement.innerText is empty string, wonder why. I am using Chrome.

  4. Thanks for the blog. It helped me a lot. I would like to give a suggestion: We can also use Lightning design system classes – “slds-is-collapsed” and “slds-is-expanded” instead of writing our own CSS.

  5. Hey Jitendra, Thanks for sharing the above code snippet and it really helped. For CollapsiblePanelHelper.js [Client side Helper] you can use the below code which worked for me unless you don’t want to change the “+” sign to “-“.

    1. ({
      ToggleCollapseHandler : function(component, event) {
      var existingText = component.get(“v.collpaseText”);
      var container = component.find(“containerCollapsable”) ;

      if(existingText === “[ – ]”){
      component.set(“v.collpaseText”,”[ + ]”);
      $A.util.toggleClass(container, ‘hide’); // this is same as jquery class that will toggle class names assigned.
      component.set(“v.collpaseText”,”[ – ]”);
      $A.util.toggleClass(container, ‘hide’);

Leave a comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.