Hide/Show parsys issue in Accordion/Tab Component

Whenever we have Accordion/Tab component in author mode, placeholder in each tab would not be aligned properly as the tabs are not active. So it confuses the author and difficult to edit the content inside each tab.

To set the visibility of the parent wrapper DIV of each parsys, setting it as hidden is not a solution. If we do so it only hides exact DIV, but other parsys artifacts would still be improperly aligned.

Therefore, we need to hide each CQ parsys artifacts when these are not active.

Use the below JavaScript spinet to fix this issue.

Steps:

1.       In Accordion.jsp ,  pass parsys path to JS function by

<div class="panel">

   <div class="panel-heading" role="tab" id="heading${i}">

          Tab Title

   </div>

   <div id="faq${i}" class="panel-collapse collapse ${in}" role="tabpanel" aria-labelledby="heading${i}" data-component-id="<%= currentNode.getPath() %>/accord${i}">

     <div class="panel-body">

<cq:include path="accord${i}" resourceType="foundation/components/parsys"/>               </div>

</div>

2.  In JS script, hide all parsys when page loads

<script>

      $(window).load(function(){

var elems = $('.panel-collapse.collapse:not(.in)');        $.each(elems,function(){

            var classNames = $(this).attr('class');

            var component = $(this).attr('data-component-id'); //Parsys Path

            var parsysComp = CQ.WCM.getEditable(component);

            if (parsysComp)

            {

                parsysComp.hide();

            }

        });

    });

Above JS function, hides all parsys when page loads so all the parsys would disappear except for the active tab which has CSS class "in".

3.  Hides the parsys when tabs are not active.

    $('#accordion').on('hide.bs.collapse', function (e) {

        var component = $(e.target).attr('data-component-id');

        var parsysComp = CQ.WCM.getEditable(component);

        if (parsysComp)

        {

            parsysComp.hide();

        }

    });

4. Shows the parsys when tabs are active.

    $('#accordion').on('show.bs.collapse', function (e) {

        var component = $(e.target).attr('data-component-id');

        var parsysComp = CQ.WCM.getEditable(component);

        if (parsysComp)

        {

            parsysComp.show();

        }

    });

</script>

Final Screen: