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 the click of that particular tab while the parsys for all the other nonactive 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!