Responsive Horizontal Accordion jQuery Plugin

199

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.

Social Media Auto Publish Powered By : XYZScripts.com