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


6 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' >
    <div>
    This is the content for Accordion 3
    </div>
    </div>

    And in CSS

    .item span{
    display:inline-block;
    width: 30px;
    height:30px;
    background:url(/* URL to the Plus/Minus Image of width and height 30px */);
    margin:2px;
    }

    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.

Add Comment Register



Got Something To Say:

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


*