jQuery Tutorial: Guide to build a custom and simple accordion

Accordion are the special type of tab type UI element & can be used yo create sidebar menus or lengthy pages comfortable to read. Here is a guide to create custom Accordions with JavaScript & jQuery

jQuery Tutorial: Guide to build a custom and simple accordion
jQuery Custom and Simple Accordions

You have seen the sites with some good accordions. Here I am gonna tell you how to build a simple accordion.

What is Accordion? Accordions are the special type of UI element belonging to Tab Type Category. You can use them to create sidebars, menus or for creating interactive pages with lengthy content .

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.

<div class='container'>
  <div class='item'>Item 1</div>
  <div class='item-data'>
    <div>This is the content for Accordion 1</div>
  </div>
  <div class='item'>Item 2</div>
  <div class='item-data'>
    <div>This is the content for Accordion 2</div>
  </div>
  <div class='item'>Item 3</div>
  <div class='item-data' >
    <div>This is the content for Accordion 3</div>
  </div>
  <div class='item'>Item 4</div>
  <div class='item-data' >
    <div>This is the content for Accordion 4</div>
  </div>
</div>

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

.container {
  ;
  width: 500px;
  height: auto;
  margin: 0 auto;
}

.item {
  display: block;
  width: inherit;
  height: 40px;
  line-height: 40px;
  background: #555;
  border: 1px solid #000;
  cursor: pointer;
  color: #fff;
}

.item-data {
  display: none; 
  width: inherit;
  height: auto;
  border: 1px solid #ccc;
}

.active {
  background: #eee;
  color: #000;
}
.item-data div{
  margin: 30px;
}

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

$(document).ready(function(e){
  $('.item').click(function (e){
    if($(this).next('.item-data').css('display') != 'block'){
      $('.active').slideUp('fast').removeClass('active');
      $(this).next('.item-data').addClass('active').slideDown('slow');
    } else {
      $('.active').slideUp('fast').removeClass('active');
    }
  });
});

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.



Conclusion

Accordions are simple UI interactions but very powerful in delivering focused UX.

Have you build your own version of Accordion?

Let me know through comments ? or on Twitter at @heypankaj_ and/or @time2hack

If you find this article helpful, please share it with others ?

Subscribe to the blog to receive new posts right to your inbox.