Salesforce Lightning Component – expand and collapsable panel example

How to use aura:facet component and Learn creating expand and collapsable reusable lightning component in Salesforce

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.

Related posts

10 thoughts on “Salesforce Lightning Component – expand and collapsable panel example”

  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,
    Jayshree.

    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.
      }else{
      component.set(“v.collpaseText”,”[ – ]”);
      $A.util.toggleClass(container, ‘hide’);
      }
      }
      })

Leave a Reply to Zhenxin Wang Cancel reply

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