JavaScript实现显示和隐藏页面中的某个部分

JavaScript实现显示和隐藏页面中的某个部分

如下图：

 

 当我点击查询条件是，下边的查询块（Panel）隐藏，在次击时显示。

实现方法：
Javascript代码：

function QueryOnChang()//切换查询条件的
{
    //
    if(document.all["pnlSearch"].style.display=="none")
    {
        document.all["pnlSearch"].style.display='';
        //event.srcElement.innerText="";
        document.all["QueryImg"].src="http://www.cnblogs.com/Images/move_up.gif";
    }
    else
    {
        document.all["pnlSearch"].style.display='none';
        //event.srcElement.innerText="";
        document.all["QueryImg"].src="http://www.cnblogs.com/Images/move_down.gif";
    }
}

页面源码：

<tr>
                <td align="center" width="90%" height="1">
                    <asp:Label ID="LblTitle" runat="server" CssClass="PageTitle">我的用户组</asp:Label></td>
                <td align="center" height="1">
                    <img id="QueryImg" alt="" src="http://www.cnblogs.com/images/move_up.gif" border="0"><a onclick="QueryOnChang(); return false"
                        href="#"><strong>查询条件</strong></a>
                </td>
            </tr>
            <tr>
                <td colspan="2" height="1">
                    <asp:Panel ID="pnlSearch" runat="server" Width="100%" CssClass="TableStyle" Visible="True">
                        <table class="Grid" id="TableQuery" cellspacing="0" cellpadding="1" width="100%"
                            border="1">
                            <tr>
                                <td class="Lbl" style="height: 27px" width="15%" colspan="1" rowspan="1">
                                    部门名称：</td>
                                <td style="height: 27px" width="25%" colspan="1" rowspan="1">
                                    <asp:TextBox ID="tbRoleName" runat="server" Width="80%"></asp:TextBox></td>
                                <td class="Lbl" style="height: 27px" width="15%" colspan="1" rowspan="1">
                                </td>
                                <td class="txt" style="height: 27px" width="25%" colspan="1" rowspan="1">
                                </td>
                            </tr>
                            <tr>
                                <td class="Lbl" colspan="4" style="height: 22px">
                                    <p align="center">
                                        <asp:Button ID="btnQuery" runat="server" Text="查询" CssClass="btn" OnClick="btnQuery_Click">
                                        </asp:Button></p>
                                </td>
                            </tr>
                        </table>
                    </asp:Panel>
                </td>
            </tr>