Toggling (Expand/collaps) panel using Jquery

Below code will show how can we create toggling (Expand/collaps) panel with very less code.

To start with, first you have to download JQuery file from http://jquery.com/

Enter below code just below the <title> tag. File name here i used is "jquery-1.2.6.min.js" depends on the jquery file you have downloaded.

<script src="jquery-1.2.6.min.js" type="text/javascript"></script>

Then Add css code to give style to the panels.

<style type="text/css">
    .Header
    {
        color: white;
        background-color: Black;
        font: bold 13px auto "Trebuchet MS",Verdana;
        font-size: 12px;
        cursor: pointer;
        width:500px;
        height:18px;
        padding: 4px;
    }
    .Body
    {
        background-color: Cyan;
        font: normal 11px auto Verdana, Arial;
        border: 1px gray;
        width:500px;
        padding: 4px;
        padding-top: 7px;
    }
</style>

Add JQuery code which does the panel toggling

<script type="text/javascript">
    $(document).ready(function()
    {
        $('#Panel1').click(function()
        {
            $('#Panel2').slideToggle('slow');
        });
    });
</script>

All the above codes are continuous one after another.

Now it’s the time to add two panels, first panel with a label and second panel with some text in it.

On clicking the first panel second panel with text will toggle.

Add this code just after form tag or add it through .NET interface.

<asp:Panel ID="Panel1" runat="server" CssClass="Header">
<asp:Label ID="Label1" runat="server">
What is JQuery {Click here to toggle}</asp:Label></asp:Panel>
               
<asp:Panel ID="Panel2" runat="server" CssClass="Body">
JQuery is a lightweight JavaScript library that emphasizes interaction between JavaScript and HTML.
It was released January 2006 at BarCamp NYC by John Resig. Dual licensed under the MIT License and
the GNU General Public License, jQuery is free and open source software.
     Both Microsoft and Nokia have announced plans to bundle jQuery[1] on their platforms, Microsoft
adopting it initially within Visual Studio[2] and use within Microsoft's ASP.NET AJAX framework
and ASP.NET MVC Framework whilst okia will integrate it into their Web Run-Time platform.
</asp:Panel>