Responsive Horizontal jQuery Accordion Plugin - AccordionJS

AccordionJS is a jQuery plugin which converts a normal html unordered list into a responsive, horizontal accordion interface. The plugin allows you to expands or collapses the associated panel content by clicking on the panel tabs. You can also specify the status, title and if is required / selected for each panel using the HTML5 data attributes.

How to use it:

1. Insert your web content into an HTML list as follows:

• data-required: if is required
• data-status: incomplete, complete, disabled or optional
• data-selected: if is checked
• data-title: title of accordion's tab

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

2. Insert the latest version of jQuery library together with the AccordionJS plugin's JavaScript and CSS files into the webpage.

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

3. Initialize the horizontal accordion.

$('#accordion').accordionjs();

---

This awesome jQuery plugin is developed by etherknight. For more Advanced Usages, please check the demo page or visit the official website.