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.

<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.

<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.

<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.

Demo  Download


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

Got Something To Say:

Your email address will not be published.


*