Search - Articles
DevASP.NET for ASP.NET, VB.NET, XML and C# (C-Sharp) Developers Tuesday, March 03, 2009
Dev Articles
Search Directory
ASP.NET
VB.Net
C-Sharp
SQL Server
 

How to Toggle Panel Control using JavaScript

Author: DevASP
Download Source Code : 714_TogglePanel.zip

In this sample application I have toggle a panel using JavaScript you can do this in multiple ways like you can also use JavaScript but it is most easy and simple way. Hope this will help you.

To squeeze our form size we majority of time go for toggling approach this makes the web site more attractive, user friendly and gives the professional look to your site. JavaScript still has strong impact in web application domain even we have moved ourselves to client side server controls (AJAX). Well instead of getting into further discussions I will start creating application. To begin with add the script tag in header block mean <head>, your script tag will be look like as follows:

 

<script language="javascript" type="text/javascript">

        function toggle(ID)

        { 

            var ctrlID = document.getElementById(ID);                        

            if (ctrlID.style.display == 'none')

            {

                ctrlID.style.display = 'block';

            }

            else

            {

                ctrlID.style.display = 'none';

            }       

        }

</script>

This script will make your block style either to block that is its content are visible or to none that is it’s in collapse state.

<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;">

                    <asp:Label ID="lbTogglePanel" runat="server" Text="Toggle Panel" Font-Underline="true" Font-Bold="true"></asp:Label>

                </td>

            </tr>

            <tr id="togglePanel" runat="server" style="display: block; 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>

Here give id to each row which participate in toggling event like in this application my two rows participate that are id="togglePanel", id="clickEvent" make it runat="server". The simple task you will do to make it effective that is in working state is to define the click event of the row on which you click and your panel turns to expand and collapse state. Register the Page Prerender event on Page load :

 

protected void Page_Load(object sender, EventArgs e)

{

    this.Page.PreRender += new EventHandler(Page_PreRender);

}                             

Now in Prerender event, define onclick event :

 

void Page_PreRender(object sender, EventArgs e)

{

   clickEvent.Attributes["onclick"] = "toggle('" + togglePanel.ClientID + "');";

}

This will make your row expand and collapse.

Article Comments
i am newbie to javascript....although the code look really simple, but it is what i really need to have for.....i am a C# programmer, and i only know how to collapse its panel writing some code in c#, not in javascript until i saw your example......One more thing please, if we want to check wether that its brower support the javascript or not, you think we can programme in javascript or not....cheers....

Posted on 4/5/2008 7:16:12 AM by tan

thanx for arrticals

Posted on 11/7/2009 5:54:17 PM by mera

   
Add Article Comment:
Name :
Email Address :
   
Comments :
 
   
<< GridView Control Beginners Guide

Disclaimer - Privacy
© 2002-2017 DevASP.net