[RESOLVED]Nested controls in DIV remain visible after hiding the DIV

AJAX, Api, Image, Jquery, View, Web Forms, , , , ,

I have a DIV that I’m hiding using an image’s onclick event.  There is a SQL where clause filter in the DIV with many controls that could be visible or hidden based on user selection. When I click the image to hide the DIV some of the controls remain visible. 
Any ideas why this is occurring?

function displayFilter() {
   if (document.getElementById("<%=div_filter.ClientID %>").style.visibility == "hidden" || document.getElementById("<%=div_filter.ClientID %>").style.visibility == "") {
      document.getElementById("<%=imgFilter.ClientID %>").title = "Hide filter...";
      document.getElementById("<%=div_filter.ClientID %>").style.visibility = "visible";
      document.getElementById("<%=div_filter.ClientID %>").style.height = "100px";
   } else {
      document.getElementById("<%=imgFilter.ClientID %>").title = "Show filter...";
      document.getElementById("<%=div_filter.ClientID %>").style.visibility = "hidden";
      document.getElementById("<%=div_filter.ClientID %>").style.height = "0px";
   }
}

hi sir,

For this issue, I think you may pay attention about how to hidden and show the Div. There is a simple code, please view it:

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#hide").click(function () {
                $("#cont").hide();
            });          
        });
    </script>
</head>
<body>
    <div id="cont" style="width:200px;height:300px;background-color:">If you click on the image, I will disappear.</div>
    <asp:Image  ID="hide" runat="server" ClientIDMode="Static" Width="50" Height="50" ImageUrl="~/1.PNG"></asp:Image>
</body>

In this code, I used the jquery hidden method, I suggest you could refer to this document:

http://www.w3schools.com/jquery/jquery_hide_show.asp

By the way, I also recommend you can consider some jquery plugin and its API,http://api.jquery.com/hide/

Regards,

Will

Leave a Reply