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.
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:
