How to set asp Panel element visible/hidden with javascript/jquery

Question

I have a asp:Panel element on my page. I'm able to set its visibility in code behind. But I need to also hide it through javascipt.

My panel is defined as following:

     <asp:Panel ID="pnlUpdateDisplay" runat="server" Visible="false" style="width:500px; border-width: thick;">
        <table style="width:300px;">
            <tr>
                <td valign="middle" style="width:120px" align="center">
                <asp:Label ID="lblUpdateMessage" runat="server" style="position:absolute; left: 120px; top: 120px;"></asp:Label>
                </td>
            </tr>
        </table>      
    </asp:Panel>

When I do this:

   var panel = document.getElementById('pnlUpdateDisplay');
   panel.style.visibility = 'hidden';
   panel.style.display='none';

There is an error saying: "Error: Unable to get value of the property 'style': object is null or undefined"

Any suggestions?

Answer 1

Setting Visible=false to the server control in ascx/aspx mark up or in a code behind prevent the control being rendered in DOM. So you will not find them in DOM and it won't be accessible to JavaScript

Better remove Visible="false" set in the panel and add style display:none.

If you want to make it in code behind follow this code

pnlUpdateDisplay.Style.Add(HtmlTextWriterStyle.Display,"none");

Then use

$('#<%=pnlUpdateDisplay.ClientID %>').toggle()

Answer 2

You can use .toggle() to toggle between show and hide:

$('#pnlUpdateDisplay').toggle();

If you want to hide it only then use .hide()

$('#pnlUpdateDisplay').hide();