使用JQuery隐藏asp.net页上的所有面板

Question

There are number of panels on the asp.net page. Panels can be hidden by giving their id in JQuery.

Example:

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

Is there any way to hide all the panels in one go without giving their ids?

ie They following JQuery can be used to clear all text box contents;

$('input[type=text]').val('');

Is there any way of doing it for hidding all the panels?

Here is the example HTML code;

<asp:Panel ID="pnlEmployee" runat="server">
<table cellpadding="3" cellspacing="0" border="0" width="100%">
</table>
</asp:Panel>

<asp:Panel ID="pnlDetails" runat="server">
<table cellpadding="3" cellspacing="0" border="0" width="100%">
</table>
</asp:Panel>

Answer 1

Your panels reveal a common pattern - they all have pnl part in their ID. Since panels are rendered as div , you can use this fact to build a selector:

$("div[id*='pnl']").hide();

Answer 2

Try as below:

JS:

document.getElementById('Panel1').style.display = 'none';

ASP.NET

<asp:Panel ID="Panel1" runat="server">
   <asp:Label ID="Label1" runat="server">Asp panel content</asp:Label>        
</asp:Panel>