jQuery Tutorial: Guide to build a custom and simple accordion
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…
- You can make it as much as small code according to your needs so that the website loading time can be reduced.
- You can use it in your way.
- You can style it in your way.
- 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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<style type="text/css"> .container { display:block; 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; } </style> |
Now we will work on JavaScript code to make it work like accordion.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<script type="text/javascript"> $(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'); } }); }); </script> |
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.
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.