simplest-accordion v0.1.1

simplestAccordion Plugin

This plugin receives whole body as argument and processes the elements having the class item

The recommended Document structure for the use of Plugin code is as below

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

For above HTML, the jQuery code to initialize the plugin will be:

$(document).ready(function(){
	$('.container').simplestAccordion();
})

The above code can be written as following when passed with the options:

$(document).ready(function(){
  $('.container').simplestAccordion('.item', '.item-data', 'active');
})

The CSS for the plugin is as below, you can add this in your regular CSS files and customize to fulfill oyur requirements

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