Responsive Horizontal Accordion JQuery Plugin

Accordion JS is a jQuery lightweight plugin which converts an unordered list into a responsive horizontal accordion. You can also customize tabs title, sataus using HTML5 data attributes as per your need

Creating Responsive Horizontal Accordion

Libraries

Include all the required plugins (JS+CSS) libraries on page after latest jQuery core library

<!--CSS-->
<link rel="stylesheet" href="css/jquery.accordionjs.css">
<!--JS-->
<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="js/jquery.accordionjs.js"></script>

HTML

Create unordered list which need to convert into accordion.

<h1>Accordion</h1>
<ul id="accordion">
	<li data-required="true"  data-status="incomplete" data-selected="true" data-title="North">Never</li>
	<li data-required="true"  data-status="complete" data-title="East">Eat</li>
	<li data-required="true"  data-status="disabled" data-title="South">Shredded</li>
	<li data-required="false"  data-status="optional" data-title="West">Wheat</li>
	<li data-required="false"  data-status="optional">
		<h2>Content title</h2>
		<input type="text" placeholder="DOM test" />
	</li>
</ul>

You can customize your behavior by using default html data attribute.

data-required: if it is required

data-status: incomplete, complete, disabled or optional to display status about tabs

data-selected: if it is checked/selected

data-title: display title of accordion’s tab

JS

Finally call the plugin..

$(function() {   
	$('#accordion').accordionjs();
});

I hope it can help you...