Hide a CQ parsys in edit mode

27 / Feb / 2015 by Rima Mittal 1 comments

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.

parsys1

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!

FOUND THIS USEFUL? SHARE IT

comments (1 “Hide a CQ parsys in edit mode”)

Leave a comment -