jQuery Tutorial: Guide to build a custom and simple accordion

jQuery Custom and Simple Accordions

jQuery Custom and Simple Accordions

Guide to Build Custom and Simple Accordion

You have seen the sites with some good accordions. Here I am gonna tell you how to build a simple accordion. What is Accordion? Accordion are the special type of tab type UI element. You can use them to create sidebar menus or for creating interactive pages.

First I want to tell you some benefits of building your own Accordions for your site. So you can…

  1. You can make it as much as small code according to your needs so that the website loading time can be reduced.
  2. You can use it in your way.
  3. You can style it in your way.
  4. You can experiment on it.

So to build a simple and custom jQuery accordion follow some easy steps.

First we will have a set of html elements that will become the backbone to our accordion.

Here is the CSS we gonna use for styling of above code.

Now we will work on JavaScript code to make it work like accordion.

The above code works fine if the CSS only is changed. If the element structure needs to be changed; some parallel changes has to be made in the JavaScript.

This is the simplest code to make the accordion.

If you made something innovative and creative using the above code; share your experiences with us through comments.

And stay tuned for more creative tutorial for web design and development by subscribing to us.

Demo  Download

14 thoughts on “jQuery Tutorial: Guide to build a custom and simple accordion

    Jim Carlin says:

    How do I add a plus button image and minus button image

    To add a + button image before the accordion heads, you can add spans and set their backgrounds as images of the +/- button.
    <div class='item'><span></span>Item 3</div>
    <div class='item-data' >
    This is the content for Accordion 3

    And in CSS

    .item span{
    width: 30px;
    background:url(/* URL to the Plus/Minus Image of width and height 30px */);

    And when the Click event occurs on the accordion Head; you can change the image to -/+ image as required.

    Michael says:

    If I wanted to have an element open from the start, how would I change the HTML and JS? I tried adding a .active tag but then after I clicked it once to close it, I couldn’t reopen.

    Along with adding the css class active you need to add the display:block style to the block, you want to be open by default. Like this

    <div class='item-data active' style="display:block;"&gt

    dorich says:

    What is the thinking behind this line?
    ($(this).next(‘.item-data’).css(‘display’) != ‘block’)
    I don’t understand the last element and how it relates to the forgoing.
    Thanks for an informative tutorial.

    Sorry for late reply!

    ($(this).next(‘.item-data’).css(‘display’) != ‘block’)
    1. this : it gets the item which has been clicked
    2. .next(‘.item-data’) : it gets the next sibling of the item( with class .item-data ) that has been supplied to it. So here the next item is the container containing the data.
    3. .css(‘display’) : it returns the css property ‘display’ of the object supplied. Here the .item-data objects’s display property is returned.
    4. != ‘block’ : Now here the returned display property is checked where it is ‘block’ or not. If it is; then the accordion collapse is fired. If it is not; the accordion open is triggered.

    Mar says:

    I’ not sure how to alternate the + and – image. How exactly is this done????

    Mar says:

    No reply and no real instructions on how to alternate the + and – images. How exactly do you do this? I can get the plus image from the span class you have provided, but how in hell do I get the minus image when the accordion expands!!!???????? Frustrating…

    Mar says:

    “And when the Click event occurs on the accordion Head; you can change the image to -/+ image as required.” – HOW EXACTLY??????? PLEASE EXPLAIN!!!!!!

    Hi Mar! Sorry for late reply!
    Here is the solution in following demo
    You can also download the html file from here

    In this demo; I have created a span with class icon.

    And on the click of the accordion tab title; I have added an extra class active-tab to the title div. Now due to this active-tab class the child span of the icon class gets affected and the image gets changed to minus;

    Melissa says:

    Is it difficult to add a sub nav into those buckets? Thanks!

    Hi Melissa! Its possible to add sub menu; but at what position you want to add sub menu…please elaborate your problem.

    Jen says:

    Thanks – this is just what I was looking for! Is there any way to have multiple accordians open?
    I tried removing the line:
    $(‘.active’).slideUp(‘fast’).removeClass(‘active’); in the “if” statement.

    That lets the user click to open multiple, but when I want to close a specific accordian, it closes all of them at once.
    Any help is greatly appreciated. I am going to try on my own as well!


    Hi Jen!
    You did it correctly to let user open all the accordions without collapsing other ones!

    And to close the clicked accordion, you can replace the .active with this in else section. So the colde will become like this:

Got Something To Say:

Your email address will not be published. Required fields are marked *