Hide a CQ parsys in edit mode
Often, a situation is encountered in CQ where we have a number of parsys on our page and it is required to show/hide some of them on certain events. A typical use case is that of a Tabbed Component where the parsys associated with a particular tab needs to be shown only on click of that particular tab while the parsys for all the other non active tabs should be hidden.
If my parsys is wrapped by a container div something like this.
<div class=”genericTabContent”><cq:include path=”par” resourceType=”foundation/components/parsys” />
</div>
Then, calling the .hide() method on the div doesn’t hide the parsys. Rather, the parsys is visible floating somewhere on the page making the authoring experience very tough.
All attempts to hide the parsys through CSS seem to fail.
A possible solution is :
var parsysComp = CQ.WCM.getEditable(“path to the parsys”);
parsysComp.hide(); // makes the parsys visible
parsysComp.show(); // hides the parsys
To get the path to the parsys, the current node path can be fetched on our jsp page:
<div id=”currentNodePath” class=”${currentNode.path}”></div>
Once the current node path is known, this code snippet would work:
var parsysComp = CQ.WCM.getEditable((‘#currentNodePath’).attr(‘class’)+”/par”);
Hope this was helpful!
Hi , what to do for same parsys issue in accordion component?