Responsive Horizontal Accordion jQuery Plugin
Wanna add responsive horizontal accordion as your website banner or display information in horizontal tabs then In this post I am going to share AccordionJS plugin to create responsive horizontal accordion. AccordionJS 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();
});
See live demo and download source code.
DEMO | DOWNLOAD
Visit official github repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.
