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.
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>
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
Similarly on clicking the ‘ – ‘ button, the panels fade out to their original position creating a cool UI effect
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.
This article has been editorially reviewed by Suprotim Agarwal.
C# and .NET have been around for a very long time, but their constant growth means there’s always more to learn.
We at DotNetCurry are very excited to announce The Absolutely Awesome Book on C# and .NET. This is a 500 pages concise technical eBook available in PDF, ePub (iPad), and Mobi (Kindle).
Organized around concepts, this Book aims to provide a concise, yet solid foundation in C# and .NET, covering C# 6.0, C# 7.0 and .NET Core, with chapters on the latest .NET Core 3.0, .NET Standard and C# 8.0 (final release) too. Use these concepts to deepen your existing knowledge of C# and .NET, to have a solid grasp of the latest in C# and .NET OR to crack your next .NET Interview.
Click here to Explore the Table of Contents or Download Sample Chapters!
Was this article worth reading? Share it with fellow developers too. Thanks!
Suprotim Agarwal, MCSD, MCAD, MCDBA, MCSE, is the founder of
DotNetCurry,
DNC Magazine for Developers,
SQLServerCurry and
DevCurry. He has also authored a couple of books
51 Recipes using jQuery with ASP.NET Controls and
The Absolutely Awesome jQuery CookBook.
Suprotim received the prestigious Microsoft MVP award for 17 consecutive years, until he resigned from the program in 2025. In a professional capacity, he is the CEO of A2Z Knowledge Visuals Pvt Ltd, a digital group that offers Digital Marketing and Branding services to businesses, both in a start-up and enterprise environment.
Get in touch with him on Twitter @suprotimagarwal or at LinkedIn