5 Different Ways of Showing and Hiding Content of an ASP.NET Panel using jQuery

Posted by: Suprotim Agarwal , on 8/11/2009, in Category jQuery and ASP.NET
Views: 48211
Abstract: In this short and simple article, we will explore 5 different ways of expanding and collapsing an ASP.NET Panel using jQuery.
5 Different Ways of Showing and Hiding Content of an ASP.NET Panel using jQuery
 
In this short and simple article, we will explore 5 different ways of expanding and collapsing an ASP.NET Panel using jQuery. Sometime back, I had covered a similar article where I demonstrated how to create a Smooth Cascading Effect with ASP.NET Panels using jQuery.
In this article, I will be making use of the jQuery Effects API to demonstrate some cool effects on the ASP.NET Panel.
Note: 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 the latest version of 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.
Step 2: In the <head> section, add a reference to the jQuery library as shown below
<head runat="server">
    <title>Show Hide ASP.NET Panels in Different Ways</title>
     <script type='text/javascript'
        src='http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js'>
    </script>
You can also download the jQuery file and reference it.
Step 3: The next step is to create an interface for showing the different effects on the ASP.NET Panel. Add an ASP.NET Panel control and a few ASP.NET Hyperlink controls to the page. I have also added some text to the Panel control as shown below:
<body>
<form id="form1" runat="server">
<asp:HyperLink ID="Link1" runat="server" NavigateUrl="#">Using slideToggle
    </asp:HyperLink><br />
    <asp:HyperLink ID="Link2" runat="server" NavigateUrl="#">Using Toggle
    </asp:HyperLink><br />
    <asp:HyperLink ID="Link3" runat="server" NavigateUrl="#">Using Animate
    </asp:HyperLink><br />
<asp:HyperLink ID="Link4" runat="server" NavigateUrl="#">Using slideUp and slideDown
    </asp:HyperLink><br />
    <asp:HyperLink ID="Link5" runat="server" NavigateUrl="#">Display Text
    </asp:HyperLink>
 
    <asp:Panel ID="panelText" runat="server" CssClass="panel">
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc
       turpis nunc, placerat ac, bibendum non, pellentesque nec, odio.
       Nulla fringilla aliquet nibh. Donec placerat, massa id commodo
       ornare, justo lectus faucibus leo, in aliquam nisl quam varius
       velit. Maecenas ullamcorper. Aliquam lectus metus, scelerisque
       ac, scelerisque vitae, sodales eu, metus. Sed varius nisi sit
       amet turpis. Mauris a arcu iaculis risus sodales dignissim.
       Aliquam ac risus. Donec turpis. Sed sit amet mi. Nam sem nunc,
       suscipit quis, cursus non, facilisis nec, diam. Donec nec mi
       semper urna interdum ultrices. Sed tellus. Sed sodales, quam
       sit amet dignissim ornare, orci velit blandit augue, ut pretium
       diam pede eget felis. Maecenas turpis justo, dapibus non,
       scelerisque et, consequat id, est. Mauris ornare. Donec
       posuere ligula et nulla. Quisque sollicitudin libero vitae
       dolor.Curabitur elementum venenatis lectus. Class aptent taciti
       sociosqu ad litora torquent per conubia nostra, per inceptos
       himenaeos. Cum sociis natoque penatibus et magnis dis parturient
       montes, nascetur ridiculus mus. Nam velit. Quisque eros nisi,
       congue id, aliquam ac, interdum in, velit. Duis cursus tellus
       molestie libero. Cras scelerisque pellentesque nisl. Phasellus
       adipiscing pretium mi. Curabitur faucibus nisl sit amet ante.
       Pellentesque lacinia erat a nisi molestie lacinia. In erat
       metus, tincidunt id, consequat nec, blandit bibendum, quam.
       Nunc a tortor.
    </asp:Panel> 
</form>
</body>
 
The Panel has a CssClass set to ‘panel’ which looks similar to the following:
    <style type="text/css">
    .panel{
        display:none;
    }
    </style>
Let us now demonstrate some ways to show and hide the content of the ASP.NET Panel with some jQuery effects.
Note: If you are using MasterPage, check my post over here Access an ASP.NET control on a MasterPage using jQuery
Method 1: Using slideToggle to toggle the visibility of the Panel by adjusting its height.
    <script type="text/javascript">
        $(function() {
            $("#Link1").click(function(evt) {
                evt.preventDefault();
                $('#panelText').slideToggle('slow');
            });
        });
    </script>
Method 2: Using Toggle to display and hide the Panel with a nice animation effect
    <script type="text/javascript">
            $(function() {
                $("#Link2").click(function(evt) {
                    evt.preventDefault();
                    $('#panelText').toggle('fast');
                });
            });
    </script>
Method 3: Using Animate to run custom animations on the properties of the Panel. Here we are animating the height, margin and opacity.
    <script type="text/javascript">
        $(function() {
            $("#Link3").click(function(evt) {
                evt.preventDefault();
                $("#panelText").animate({
                    height: 'toggle', margin: 'toggle', opacity: 'toggle'
                }, 500);
            });
        });
    </script>
 
Method 4: Using slideUp and slideDown for hiding and showing the Panel by adjusting the Height property. Here we first check to see if the Panel is hidden. If it is, then slideDown, else slideUp.
    <script type="text/javascript">
        $(function() {
            $("#Link4").click(function(evt) {
                evt.preventDefault();
                if ($('#panelText').is(":hidden")) {
                    $("#panelText").slideDown("fast");
                } else {
                    $("#panelText").slideUp("fast");
                }
            });
        });
    </script>
Method 5: Using Toggle again, but this time changing the Text of the Link that indicates the action to the user. To start with, the user sees ‘Display Text’. On clicking the link, the link text changes to ‘Hide Text’.
    <script type="text/javascript">
        $(function() {
            $('#Link5').click(function(ev) {
                ev.preventDefault();
                $('#panelText').toggle('slow');
                $('#Link5')
                .text(($('#Link5').text() == 'Display Text'
                ? 'Hide Text' : 'Display Text'))
 
            });
    </script>
 
Shown above were 5 different ways of showing/hiding the contents of an ASP.NET Panel. The samples were tested on IE 7, Firefox 3 and Chrome 2. There are some other ways too, like using hide() and show() with animation, to hide contents of an ASP.NET Panel, but I leave that to you to implement and find out other ways. That’s the best way to learn a technology. Try!
You can view a Live Demo of the techniques demonstrated over here. The entire source code of this article can be downloaded over here.
I hope you liked the article and I thank you for viewing it.
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 authored a new 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 shaheersl on Wednesday, August 19, 2009 1:45 AM
Great Article
Comment posted by Bubba on Tuesday, August 25, 2009 9:15 AM
What is the advantage of using an ASP:Pannel vs DIV?
Comment posted by Suprotim Agarwal on Thursday, August 27, 2009 4:18 AM
Bubba: I would re-frame your questions as difference between ASP.NET Server and HTML controls. Here's an article that explains it best
http://msdn.microsoft.com/en-gb/library/zsyt68f1.aspx
Comment posted by tom on Tuesday, September 1, 2009 5:37 PM
Thanks for the article. However I'm using the code in conjunction with multiple Update Panels and when there is an asynchronous post-back, I lose the jquery functionality.
Comment posted by Vladimir Kelman on Thursday, October 1, 2009 3:05 PM
Hi! Are you aware that your live examples do not work in IE 8 (work only in compatibility mode)?
Comment posted by Vishal Shrivastav on Saturday, July 2, 2011 3:26 AM
its good...
How can i open asp:panel as popup on button click event.
Comment posted by greyhound on Monday, December 12, 2011 12:35 PM
This is a very nice article. I found it to work well with an asp.net web page but when I tried in in a solution using master pages, I could not get the panels to display. Any suggesstions?
Comment posted by dotnetpools on Monday, October 8, 2012 6:35 AM
This is rreally noce one.
http://www.dotnetpools.com/Article/ArticleDetiail/?articleId=31&title=Hide/Show Effect Using Jquery in Asp.net
Comment posted by Ravi on Monday, March 25, 2013 2:00 AM
HI,
This is really a good article but I am looking for something extra.
I have multiple panels in one form and I want them to show/hind based on Link button click.
I do not want to follow simple visible false/true method.
I am looking for more prospective way to achieve this.
Any idea?
Thanks
Comment posted by Saurabh Agrawal on Monday, May 20, 2013 12:36 AM
All in one article

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