jQuery Collapsible Panel

Introduction

In this article I would like to show you a very easy way to create a Collapsible Panel using jQuery. You may ask, "Why not use the 'Aaccordion control' or the 'CollapsiblePanel' Ajax controls?" Ajax controls are good but they carry a lot of weight with them, so we are going to create a collapsible panel with the help of JQuery.

What is a Collapsible Panel and where is it useful?

It is a technique where we can provide expand/collapse a feature to the section of a page. It is nothing more than providing a expand/collapse feature to a DIV element. Basically it can be used on any page with some lengthy content, to limit what we display. I have used it for my login control to make it sleek and beautiful as well to limit the content I want to show at one time. Refer to the images below for better understanding.

Collapsed Panel

Expanded panel

Integrating jQuery

Download the latest jQuery library from jQuery.com and include a reference to the jQuery library file in your aspx page, see below.

<script 
src=”jQuery-1-2-6.js”  type=”text/javascript” > </script>

Building Collapsible DIV

Initially when the page loads, we shall display the DIV (panel) in the collapsed mode, and let the user Expand if they wish.

<div id="Container" class="Container">
   <div id="Header" class="Header">
      Member Login
   </div>
     
   <div id="Content" class="Content">  
      <div class="LoginSpotRed">
<h2>
      <asp:Literal ID="litLogin"  Text=" Login" runat="server"/>
</h2>
      </div>  
    
      <div class="frm_blk">
<asp:Label ID="lblUsername" EnableViewState="False"
Text=”Email or membership number” runat="server" />
<asp:TextBox ID="txtUsername" CssClass="textbox" runat="server"/>
      </div>
 
      <div class="frm_blk">
<asp:label ID="lblPassword" EnableViewState="False" Text=”Password”    runat="server" />
                   
<asp:TextBox ID="txtPassword" TextMode="password" CssClass="textbox" runat="server" />
      </div>
               
      <div class="frm_blk">
            <asp:Literal ID="litForgotten" runat="server"
Text=”Forgotten your password?”/>
      </div>
 
      <div class="frm_btn">
<asp:Button ID="btnGo" EnableViewState="false" CssClass="button"
     Text="Login” runat="server" />
      </div>

      <div class="clear"></div>
               
   </div>
</div>

The Div with Id “Container” holds another DIV “Header” clicking this DIV will Expand/collapse the login control.

CSS for the Login Control

In the CSS we shall set the background image for the Header and some other CSS.

.Container {}

.Header {  height:25px; background-color:black; color:White; 
           font- size:medium; padding-top:10px; margin-top:-20px;
           margin-left:-10px; background-image:url(http://rightArrow.gif);
           background-repeat:no-repeat; background-position:8% 55%; }

.Header2 { background-color:Gray; color:Black;
           background-image:url(http://downArrow.gif); background-repeat:no-repeat;
           background-position:8% 55%;}

.Header:hover { cursor:hand; }

.Content { }

.LoginSpotRed { color:Red; margin-bottom:-20px; margin-top:10px;}

.LoginSpotSpace { margin-top:10px; background-color:Blue; width:20px; }

div.frm_blk { padding-top: 10px; }

div.frm_btn { float: right; }

Now the jQuery

Now we implement the Expand/collapse funtionality using jQuery. For this we shall use the toggle function from the jQuery library. The toggle function is an odd/even function. On every odd click it will execute the show function and on even clicks the hide function.

<script src="jquery-1.2.6.js" type="text/javascript"></script>
// Runs with window.onload
$(document).ready(function() {    
 
   $("div.Container DIV.Header").toggle (
      function() {
        $("div.Content").show("slow");
        $(this).addClass("Header2");
      
     },
     function() {
        $("div.Content").hide("slow");
        $(this).removeClass("Header2");
      
     });
});
</script>

And so my friends we have a collapsible panel ready for use.