Smooth Cascading Effect with ASP.NET Panels using jQuery

Posted by: Suprotim Agarwal , on 5/7/2009, in Category jQuery and ASP.NET
Views: 45805
Abstract: This article shows how to create a smooth cascading effect with the ASP.NET Panels and jQuery
Smooth Cascading Effect with ASP.NET Panels using jQuery
 
Sometime back, I had written an article on Creating a Cool UI effect on ASP.NET Panels using jQuery. A dotnetcurry.com visitor, Musez wrote back asking if the effect could be automated, creating it like a cascading effect. The cascading effect here would be described as follows - When the open button is clicked, all the panels fade and slide one after the other, creating a smooth cascading effect. Similarly, when the close button is clicked, the panels slide back to their original position. Achieving such a feature is relatively simple in jQuery and I will demonstrate that in this article.
Feature Description: The user will have control over showing and hiding panels, on the click of a button. To start off with, only a ‘+’ image button will be visible in the header panel. When the user clicks on this button, all the panels will be made visible creating a sliding effect, one at a time. Similarly all the panels will slide and hide when the user clicks on the ‘–‘ image button again. Let us see how to achieve this effect.
I assume you are familiar with jQuery. If you are new to jQuery, then before moving ahead, I would recommend you to check out Using jQuery with ASP.NET - A Beginner's Guide. Please do take a note that this example uses jQuery’s current version - jQuery 1.3.2 and jQuery 1.3.2 Visual Studio 2008 Autocomplete documentation.
Step 1: Open Visual Studio 2008 > File > New > Website > Choose ‘ASP.NET 3.5 website’ from the templates > Choose your language (C# or VB) > Enter the location > Ok. In the Solution Explorer, right click your project > New Folder > rename the folder as ‘Scripts’.
Step 2: Download jQuery 1.3.2 and jQuery VS 2008 Doc. Create a ‘Scripts’ folder in the Solution Explorer of your project and add these files to this folder.
Assuming you have downloaded these files, create a reference to these files in the <head> section of your page as shown below:
<head runat="server">
    <title>jQuery ASP.NET Panel Cascading</title>
    <script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>
</head>
Note: If you are using MasterPages, check out my article on how to Use jQuery in MasterPages
Step 3: Now add a Header and a few Body panels to the page. I have also added an Images folder which contains images for ‘Show’ and ‘Hide’ buttons, as shown below:
<body>
    <form id="form1" runat="server">
    <div>
        <div class="cpHeader">
            <asp:ImageButton ID="btnShow" ImageUrl="~/Images/Show.gif" runat="server" OnClientClick="return false;" />
            <asp:ImageButton ID="btnHide" ImageUrl="~/Images/Hide.gif" runat="server" OnClientClick="return false;" />            
        </div>   
 
        <asp:Panel ID="Panel1" runat="server" class='cpBody'>
            <asp:Label ID="Label1" runat="server" Text="Label">Panel 1 Content</asp:Label>
        </asp:Panel>
        <asp:Panel ID="Panel2" runat="server" class='cpBody'>
            <asp:Label ID="Label2" runat="server" Text="Label">Panel 2 Content</asp:Label>
        </asp:Panel>
        <asp:Panel ID="Panel3" runat="server" class='cpBody'>
            <asp:Label ID="Label3" runat="server" Text="Label">Panel 3 Content</asp:Label>
        </asp:Panel>
 
    </div>
    </form>
</body>
Step 4: Observe that we have set the CssClass on the header and body panels to add some styling to the controls. The CSS will look similar to the following:
<head runat="server">
    <title>jQuery ASP.NET Panel Cascading</title>
    <style type="text/css">
        .cpHeader
        {
            color: white;
            background-color: #719DDB;
            font: bold 11px auto "Trebuchet MS", Verdana;
            font-size: 12px;
            cursor: pointer;
            width:450px;
            height:18px;
            padding: 4px;           
        }
        .cpBody
        {
            background-color: #DCE4F9;
            font: normal 11px auto Verdana, Arial;
            border: 1px gray;               
            width:450px;
            padding: 4px;
            padding-top: 7px;
        }      
    </style>   
 
...
 
Step 5: The final step is to add the Cascading UI effect to the Panels.
Add the following jQuery:
...
    <script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>
  
   
   <script type="text/javascript">
       $(document).ready(function() {
 
           $("div.cpBody").hide();
           $("#btnHide").hide();
           var panelArray = $('div.cpBody').length;
           var temp = -1;
 
           $("#btnShow").click(function displayPanel() {
               if (temp < panelArray) {
                   $('div.cpBody').eq(++temp).fadeIn(2000, function() {
                       displayPanel();
                       if (temp == panelArray) {
                           $("#btnHide").show();
                           $("#btnShow").hide();
                       }
                   });
               }
           });
 
 
           $("#btnHide").click(function hidePanel() {
               if (temp >= 0) {
                   $('div.cpBody').eq(--temp).fadeOut(2000, function() {
                       hidePanel();
                   });
                   if (temp < 0) {
                       $("#btnHide").hide();
                       $("#btnShow").show();
                       temp = -1;
                   }
               }
           });
 
       }); 
   </script>
 
Shown above is a recursive function that loops through the panels (with cssClass=’cpBody’) and creates a fading effect using the fadeIn() fadeOut() methods. To start with, all the panels are hidden by using $("div.cpBody").hide(). Then using the variables panelArray and temp, we recurse through the displayPanel() function on the click of a button(btnShow), displaying each panel one at a time using the fadeIn() function.
Similarly, we do a reverse lookup to hide the panels on the btnHide click, using the fadeout() function.
CAUTION: After wasting a couple of hours, I discovered that by mistake, I had added a reference to the jQuery Visual Studio Intellisense doc jquery-1.3.2-vsdoc2.js file. Due to this, the fadeIn() and fadeOut() was not working as expected on Mozilla3 and Crome. You do not need to add a reference to this jQuery intellisense doc file in your markup since Visual Studio automatically picks it up if it is in the same directory as that of the jQuery file. Edit: Thanks to Alex for that tip as I had completely forgotten about the same.
On running the application, when the user clicks the ‘+’ button, the panels appear one by one
jQuery Fade
Similarly on clicking the ‘ – ‘ button, the panels fade out to their original position creating a cool UI effect
jQuery Fade
Demo: The sample can be viewed live over here
I hope this article was useful and I thank you for viewing it. The entire source code of this article can be downloaded over here.
Give a +1 to this article if you think it was well written. Thanks!
Recommended Articles
Suprotim Agarwal, ASP.NET Architecture MVP, MCSD, MCAD, MCDBA, MCSE, is the CEO of A2Z Knowledge Visuals Pvt. He primarily works as an Architect Consultant and provides consultancy on how to design and develop .NET centric database solutions.

Suprotim is the founder and primary contributor to DotNetCurry, DNC .NET Magazine, SQLServerCurry and DevCurry. He has also written an EBook 51 Recipes using jQuery with ASP.NET Controls. and is authoring another one at The Absolutely Awesome jQuery CookBook.

Follow him on twitter @suprotimagarwal


Page copy protected against web site content infringement by Copyscape


User Feedback
Comment posted by Alex on Thursday, May 7, 2009 9:14 AM
Note: you shouldn't be referencing the -vsdoc.js file at all - Visual Studio 2008 (with appropriate service pack/hotfix) will detect its presence and use it automatically.
Comment posted by anup hosur on Friday, May 8, 2009 1:49 AM
nice article..
Comment posted by Abhilash on Friday, May 8, 2009 4:14 AM
Nice post.
Thanks.
Comment posted by Suprotim Agarwal on Friday, May 8, 2009 8:27 AM
Alex: I am still wondering how could I forget mentioning that. The reason the vsdoc was added manually is since the intellisense has a serious issue with the new jQuery 1.3.2 version. It does not work till the file is added manually. Anyways I have removed the text to avoid further confusion.


Anup, Abhilash: Glad you liked the article
Comment posted by Doron on Wednesday, August 12, 2009 5:16 AM
In IE 8 and FF 3.5 there is some bug in
Display Text
Comment posted by Suprotim Agarwal on Saturday, August 15, 2009 2:44 AM
Doron: Can you give some more info on the bug. A screenshot would also help.
Comment posted by Kaushal on Friday, March 12, 2010 4:16 PM
Hi, I am new to jquery. I was wondering that sometimes you have used double quotes around div.cpBody and sometimes single quote so is there any difference or jquery will take both of them? What is the standard practice? Thanks for a very good article.
Comment posted by sdf on Monday, May 6, 2013 1:58 AM
sjavascript:WebForm_DoPostBackWithOptions(new%20WebForm_PostBackOptions("ctl00$MainContent$dvwComment$ctl04",%20"",%20true,%20"",%20"",%20false,%20true))

Post your comment
Name:  
E-mail: (Will not be displayed)
Comment:
Insert Cancel