Hiding Parsys in Edit Mode

Question

Hello,
I'm building a tabbed component and I'm having trouble hiding the parsys section for inactive tabs using CSS styling (whether visibility or display).  Even though I set the visibility of the parent DIV the parsys is sitting to hidden, it still displays on the page while in Edit mode (works in Preview).
<%
        String[] linkname = properties.get("navitems", String[].class);
        for (int i = 0; i < linkname.length; i++) {
          if (i == 0) {
            %><div class="miniShow" style="visibility: visible;"><% 
          } else {
            %><div class="miniShow" style="visibility: hidden;"><%
          %>
              <div class="<%= "basicMiniShow"+(i)%>"><cq:include path="<%= "mininav"+i %>" resourceType="foundation/components/parsys"/></div>
            </div>
          <%
         } // end for
%>
With the code above, as my JavaScript function properly swaps between tabs and shows the components in the parsys, the subsequent "Drag your components here" box doesn't disappear.  For example, if I add 2 tabs and place a Button in the first parsys and a Image in the second, swapping tabs correctly shows/hides the button/image respectively - however the "Drag your components here" box for both are always visible.
What am I missing here?

Answer 1

   The paragraph component [1] is resposible for rendering once editContext has a resource set[2].   Either
   *  Need to pass a variable & then based on that variable paragraph component should decides whether to render or not.
   OR
   *  Using javascript Iterate all the div below parent div and apply the style="clear:both".
[1]   /libs/foundation/components/parsys/parsys.jsp  
[2]
    if (editContext != null ) {
        editContext.setAttribute("currentResource", null);
        // draw 'new' bar
        IncludeOptions.getOptions(request, true).getCssClassNames().add("section");
        %><cq:include path="*" resourceType="<%= newType %>"/><%