Creating an Accordion using JQuery

JQuery has quickly become my preferred framework. It has a relatively small footprint and offers a lot of functionality with little code. Today we will be using this library to create a simple accordion which you can use on your website, or blog.

Download my JQuery Accordion example here or View the JQuery Accordion Screencast

First of all, please visit JQuery’s site and download the production code. Then proceed to include this into your HTML file, using something similar to the below in the <head> section:

<script type="text/javascript" src="js/jquery-1.2.6.pack.js"></script>

Now let’s begin to create our simple mark-up for our accordion.

<div class="accordion">
    <h3>Heading One</h3>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
    <h3>Heading Two</h3>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
    <h3>Heading Three</h3>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
</div>

We are just using H3 tags for our headings and a paragraph tag which would contain your actual content. This is not looking too pleasing yet. Add the below CSS and then view the HTML file once again.

<style type="text/css">
body {
    margin: 10px auto;
    width: 570px;
    font-size: 0.75em;
    font-family: Arial, Helvetica, sans-serif;
}
.accordion {
    width: 480px;
    border-bottom: solid 1px #c4c4c4;
}
.accordion h3 {
    background-color: #e9e7e7;
    padding: 7px 15px;
    margin: 0;
    font-size: 1.2em;
    border: solid 1px #c4c4c4;
    border-bottom: none;
    cursor: pointer;
}
.accordion h3:hover {
    background-color: #DFD1D1;
}
.accordion h3.active {
    background-color: #D1D1DF;
}
.accordion p {
    background: #f7f7f7;
    margin: 0;
    padding: 10px 15px 20px;
    border-left: solid 1px #c4c4c4;
    border-right: solid 1px #c4c4c4;
    display: none;
}
</style>

Most of the above is pretty self explanatory and mostly has visual meaning. The most important aspect to see is that we have set “display:none” to each accordion paragraph. If you have seen an accordion you know that the content is not shown until a heading is clicked.

Another selector that you might not see point in at the current moment is the class “active”. This will be assigned to whichever heading has been clicked, as to provide the user with a visible clue as to which content they are seeing.

Enough of the XHTML / CSS work…. you came here for the JQuery right? Let’s pseudo code out what we want our JavaScript to do. The following corresponds to the line numbers in the below code.

First off we will need to make sure the DOM is ready to be manipulated
Add our class of active to the heading which will show by default
Show the content (p tag) of the default heading
When an h3 is clicked
- Get its corresponding paragraph element, and toggle its visibility
- Get other visible p tags and hide them
- Add the class active to the h3 tag we clicked on
- Remove the class from the other h3 tags

Now let’s write out the JQuery to accomplish each of these tasks:

$(function(){
    $(".accordion h3").eq(2).addClass("active");
    $(".accordion p").eq(2).show();
    $(".accordion h3").click(function(){
        $(this).next("p").slideToggle("slow")
        .siblings("p:visible").slideUp("slow");
        $(this).toggleClass("active");
        $(this).siblings("h3").removeClass("active");
    });
});

Now test this out in a browser and be wowed as how simple it was to create a neat accordion with 10 lines of code!

If you enjoyed this JQuery tutorial, make sure to comment and let me know what other JQuery tutorials you are looking for.

Share and Enjoy:

Tags: JavaScript, jquery

Written by Brenley Dueck

5 Responses to “Creating an Accordion using JQuery”

Vijendra Says:
December 23rd, 2008 at 6:31 am
Superb!! I have used this as is in one of my Rails sites. Works great. Thanks.
R Says:
September 15th, 2009 at 2:48 am
Awesome code …………
working absolutely fine ……………..
Tom Says:
October 26th, 2009 at 4:33 pm
Works great, really appreciate it!
Thank you;)
Tom
Natti Says:
February 11th, 2010 at 11:24 am
Thanks, off all the offered accordions yours was the best way for my projekt
Keep up your work!
saiprasad Says:
March 1st, 2010 at 10:10 pm
it works fine but i am a beginner could u send some material ….