Home » Articles


Sponsored links

CodeDigest Navigation

Technology News
No News Feeds available at this time.

Community News
No News Feeds available at this time.
Creating Accordion Control using jQuery in ASP.Net – Part 1

By Satheesh Babu
Posted On May 04, 2010
Article Rating:
Be first to rate
this article.
No of Comments: 2
Category: jQuery
Print this article.

Creating Accordion Control using jQuery in ASP.Net – Part 1


Accordion panel is display control which has multiple collapsible panels but allows only one panel to be expanded at a time. Since, it allows only one panel to be expanded at a time it helps us to efficiently manage the screen real estate. Technically speaking, it is nothing but making a DIV or a Paragraph tag to expand and close when a header element is clicked.

Refer the below figure to understand better,

Creating/Developing/Building Accordion Panel using jQuery in ASP.Net


AjaxControlToolkit already has an Accordion panel control packed with it. Refer here to know more.

After the release of jquery library, the clientside scripting has become very easy and faster. Since, the Accordion panel functionality is all about expanding and collapsing an html element (<DIV>/<P>) it can be easily implemented with jquery library. Moving forward, we will see how to build the same control using jquery in an ASP.Net page.
If you are new to jQuery, i recommend you to read the below FAQ’s to have a quick understanding.

What is jQuery? How to use it in ASP.Net Pages?

How to enable jQuery intellisense in Visual Studio 2008?

How to use jQuery intellisense in an external javascript file?


Read the below article, to know more about jQuery library and its advantages,

Introduction to jQuery in ASP.Net and 10 Advantages to Choose jQuery



1.      Open Visual Studio 2008.

2.      Create a new website project in your visual studio 2008 using C# as the language.

3.      Now, we will first design our accordion panel using div tags. We will use a DIV tag for header and another div tag for the content by making it closed by default.  Refer the below code,


<div class="Accordion">

<div id="header" class="collapsePanelHeader">

<div id="dvHeaderText" class="HeaderContent">ASP.Net Articles</div>


<div id="dvASPNET" class="Content" style="display:none">

<!-- Your Content goes here -->


<br />

<div id="Div2" class="collapsePanelHeader">

<div id="Div3" class="HeaderContent">Csharp Articles</div>


<div id="dvCSharp" class="Content" style="display:none">

<!-- Your Content goes here -->


<br />

<div id="Div7" class="collapsePanelHeader">

<div id="Div8" class="HeaderContent">jQuery Articles</div>


<div id="dvjQuery" class="Content" style="display:none">

<!-- Your Content goes here -->




 In the above code, i have defined 3 panels which displays its header div visible (div with cssclass collapsePanelHeader) and the content div collapsed (div with cssclass Content). When i say collapsed it is nothing but making its display property as none.

Below, you can find all the css class used above.







       background-image: url(images/bg-menu-main.png);





















Next, we will use the jquery library to expand and close the content div when the header div is clicked.

4.      Download the new jquery library from here. Integrate the new jquery library into your project. Refer the FAQ’s above.

5.      To provide Accordion panel effect to the DIV, we will define a click event for the header div. In this event, we will expand or collapse the content div using slideToggle() methods in jQuery. Refer the below code,

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

<script type="text/javascript">

    $(document).ready(function() {       

        $("DIV.Accordion > DIV.collapsePanelHeader").click(function() {


            $("DIV.Accordion > DIV.Content").not($(this).next("DIV.Content")).slideUp("slow");





In the above code, the slideToggle() method will expand the content div if it is in collapsed state or it will collapse if it is already expanded. This method will also take an argument in milliseconds to expand or collapse the div. It also take string arguments 'fast' and 'slow' can be supplied to indicate durations of 200 and 600 milliseconds, respectively.

6.      That’s it. Execute the page and see Accordion panel in action.


The Accordion panel we created above will load the content in the content div at the very first load of the page. This means, we still populate the data in every content div but it is just hidden to the users. By doing like this, we are taking the advantage to efficiently use the screen real estate for displaying larger data. On the other side, loading larger data in all the panels at a stretch will not be a good idea if your content div needs to be populated from an external datasource or simply when you have more number of panels that fetches data from a datasource into your Accordion control. Also, there are high chances that every user will not require all the data in every panel in your Accordion control. Doing like this will simply make your page bulky and will affect the page load time. To handle this scenario, we can lazy load the panels only when it is clicked to expand. Lazy loading is a technique where the required data will be loaded only on demand. We will see this in part 2 of this article series.



Download Source 


The introduction of jquery has made the many complex client side task easier. Accordion panel is another example which proves the simplicity of jquery. Download the source attached with this article and see it in action.

Stay tuned for the Part 2 of this article!

Happy Coding!!


Similar Articles
You can contribute to CodeDiget.Com:
Donate to
Article Feedback
RE:easier than that!
Thanks for your comment! You forgot to mention that your example requires jQuery UI plugin to be incorporated into the project. The above article does not use any plugins..
easier than that!
$(function() {
$( "#accordion" ).accordion();

<div class="demo">

<div id="accordion">
<h3><a href="#">Section 1</a></h3>
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
<h3><a href="#">Section 2</a></h3>
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
suscipit faucibus urna.
<h3><a href="#">Section 3</a></h3>
Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
<h3><a href="#">Section 4</a></h3>
Cras dictum. Pellentesque habitant morbi tristique senectus et netus
et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
mauris vel est.
Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos himenaeos.

</div><!-- End demo -->

<div class="demo-description" style="display: none; ">
Click headers to expand/collapse content that is broken into logical sections, much like tabs.
Optionally, toggle sections open/closed on mouseover.
The underlying HTML markup is a series of headers (H3 tags) and content divs so the content is
usable without JavaScript.
</div><!-- End demo-description -->