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.

HTML

Create unordered list which need to convert into accordion.

 
Accordion
    

      
Never
      
Eat
      
Shredded
      
Wheat
      

        
Content title
        
      
    

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.