Show and Hide ASP.NET Panels with Animation using jQuery

HTML:

<form id="form1" runat="server">
<div class="smallDiv">
<h2>Click on a Radio Button to Display/Hide the
Contents of a Panel</h2>
<asp:RadioButtonList ID="rbl" runat="server" class="tbl">
<asp:ListItem Text="Toggle" Value="0"></asp:ListItem>
<asp:ListItem Text="SlideUpDown" Value="1"></asp:ListItem>
<asp:ListItem Text="SlideToggle" Value="2"></asp:ListItem>
<asp:ListItem Text="Animate" Value="3"></asp:ListItem>
</asp:RadioButtonList>
<br />
Tip: Each RadioButton produces a different animation
</div>
<br /><br />
<div class="bigDiv">
<asp:Panel ID="panelText" runat="server" CssClass="panel">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc urpis nunc, placerat ac, bibendum non,  ellentesque nec, odio. Nulla fringilla aliquet nibh. Donec placerat, massa id commodo ornare, justo lectus faucibus leo, in aliquam nisl quam varius
</asp:Panel>
</div>
</form>

Jquery Script:

<script type="text/javascript">
$(function() {
var $radBtn = $("table.tbl input:radio");
var $panel = $('div.panel');
$radBtn.click(function() {
var value = $(':radio:checked').val();
switch (value) {
case '0':
$panel.toggle('slow');
break;
case '1':
if ($panel.is(":hidden")) {
$panel.slideDown("fast");
} else {
$panel.slideUp("fast");
}
break;
case '2':
$panel.slideToggle('slow');
break;
case '3':
$panel.animate({
height: 'toggle',
margin: 'toggle',
opacity: 'toggle'
}, 500);
break;
default: ;
}
});
});
</script>

Explanation:

In this sample, I will demonstrate to you 4 different ways of displaying and hiding the content of a Panel. The selectors are cached into variables as shown below:

var $radBtn = $("table.tbl input:radio");
var $panel = $('div.panel');

In the first method, we use toggle() which toggles the visibility of all matched elements without an animation.

$panel.toggle('slow');

The second method uses slideUp() to hide, and slideDown() to display the matched elements in a sliding motion.

if ($panel.is(":hidden")) {
$panel.slideDown("fast");
} else {
$panel.slideUp("fast");
}

The third method simplifies the technique adopted in the second method by using slideToggle(), which toggles the visibility of all matched elements using a sliding motion. Since we are using the same radio button to trigger the event, slideToggle() is more relevant here, rather than using slideUp or slideDown().

$panel.slideToggle('slow');

And finally the fourth method that shows how to make custom animations by using animate(). In this example, we are animating some style properties (height, margin and opacity) of the Panel.

$panel.animate({
height: 'toggle',
margin: 'toggle',
opacity: 'toggle'
}, 500);