Accordion Control using jQuery and ASPNET Panel Server Control

Accordion control helps a lot in showing bunch of data in small space with nice feature collapsible boxes. Today, we will build our own accordion control using ASP.NET panel and jQuery. In order to make this little bit more interesting we will use easing plugin.

Screenshot:

Code for HTML Head section:

Note: internal CSS is used here just for demo purpose, it's recommended to always define CSS in a separate .css file, and same goes for any JavaScript you write should go in separate .js file

<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

<script src="Scripts/jquery.easing.1.3.js" type="text/javascript"></script>

<style type="text/css">

#jqAccordian

{

width:220px;

background-color:#2f2f2f;

border:5px double #bfbfbf;

padding:7px;

 

}

 

.jqAccPane

{

border:1px solid #bfbfbf;

width:100%;

background-color:#efefef;

}

.jqAccPane h4

{

margin-top:0;

background-color:#5f5f5f;

color:#ffffff;

padding:0 2px;

vertical-align:top;

}

 

.jqAccPane p

{

margin-top:0;

background-color:#efefef;

color:#848448;

padding:0 2px;

}

</style>

 

HTML Body:

<div id="jqAccordian">

<asp:Panel ID="Panel1" runat="server" class="jqAccPane">

<h4>Content 1</h4>

<p> Description of content 1<br /><br /><br /><br /><br /><br /></p>

</asp:Panel>

<asp:Panel ID="Panel2" runat="server" class="jqAccPane">

<h4>Content 2</h4>

<p> Description of content 2<br /><br /><br /><br /><br /><br /></p>

</asp:Panel>

<asp:Panel ID="Panel3" runat="server" class="jqAccPane">

<h4>Content 3</h4>

<p> Description of content 3<br /><br /><br /><br /><br /><br /></p>

</asp:Panel>

<asp:Panel ID="Panel4" runat="server" class="jqAccPane">

<h4>Content 4</h4>

<p> Description of content 4<br /><br /><br /><br /><br /><br /></p>

</asp:Panel>

<asp:Panel ID="Panel5" runat="server" class="jqAccPane">

<h4>Content 5</h4>

<p> Description of content 5<br /><br /><br /><br /><br /><br /></p>

</asp:Panel>

</div>

<script type="text/javascript">

$(document).ready(function () {

$('.jqAccPane > p').hide();

$('<img src="image/sort_down.png" />&nbsp;&nbsp;').prependTo('.jqAccPane > h4');

$('.jqAccPane > h4').click(function () {

if (!$(this).next().is(':visible')) {

$(this).next().animate({

height: 'show'

}, 1000, 'easeOutBounce');

 

$(this).children('img').attr('src', 'image/sort_up.png');

 

}

else if ($(this).next().is(':visible')) {

$(this).next().animate({

height: 'hide'

}, 1000, 'easeOutBounce');

$(this).children('img').attr('src', 'image/sort_down.png');

 

}

});

});

</script>

Tags: , , ,

ASP.NET | jQuery