Home > ASP.Net, Javascript > Show and Hide Panel using Javascript

Show and Hide Panel using Javascript


Hi

try this example:-

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>">
<head runat="server">
    <title>Toggle Panel</title>

    <script language="javascript" type="text/javascript">
        function toggle()
        { 
            var ctrlID = document.getElementById('<%= pnlToggle.ClientID %>');                        
            if (ctrlID.style.display == 'none')
            {
                ctrlID.style.display = 'block';
                document.getElementById('<%= lbTogglePanel.ClientID %>').innerHTML="Hide Panel";
            }
            else
            {
                ctrlID.style.display = 'none';
                document.getElementById('<%= lbTogglePanel.ClientID %>').innerHTML="Show Panel";
            }       
        }
    </script>

</head>
<body>
    <form id="form1" runat="server">
        <table cellpadding="2" cellspacing="2" border="0" width="50%">
            <tr id="clickEvent" runat="server">
                <td style="background-color: Gray; font-family: Verdana; cursor:hand; font-size: small;" onclick="javascript:toggle();">
                    <asp:Label ID="lbTogglePanel" runat="server" Text="Hide Panel" Font-Underline="true" Font-Bold="true"></asp:Label>
                </td>
            </tr>
            <tr id="togglePanel" runat="server" style="font-family: Verdana;
                font-size: small;">
                <td>
                    <asp:Panel ID="pnlToggle" runat="server">
                        <asp:Label ID="lbl1" runat="server" Text="Content 1">
                        </asp:Label>
                        <br />
                        <asp:Label ID="Label1" runat="server" Text="Content 2">
                        </asp:Label>
                        <br />
                        <asp:Label ID="Label2" runat="server" Text="Content 3">
                        </asp:Label>
                    </asp:Panel>
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

Hope this helps

Good Luck

Advertisements
Categories: ASP.Net, Javascript
  1. a
    February 3, 2010 at 11:13 am

    its not working ….and should not work ….no click event is there

    • yasserzaid
      February 3, 2010 at 1:16 pm

      Thank you for your comment , i’m sorry for that mistake i update my post now and you can try this eample and it will work 🙂

      Good Luck.

  2. June 9, 2011 at 1:12 am

    thank you. this really helped me.

  3. abc
    November 6, 2014 at 6:46 pm

    not working

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: