Responsive Horizontal Accordion jQuery Plugin

0 149

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.

Leave A Reply

Your email address will not be published.