Stylish jQuery Accordion Plugin – Akordeon

by

Looking for Stylish jQuery Accordion Plugin? If yes then here I am going share a simple jQuery Plugin which provide a lightweight and customizable interface for collapsible panels that can hold any kind of data in a limited space. This plugin is fully customizable and can be used to display large chunks of data (text, images etc.) in a limited space. For instance, you can use it to display categorized data or menu options just like a restaurant’s menu items with each category data displayed in a separate panel.
Stylish jQuery Accordion Plugin

Libraries

Add jquery core library and then add following plugins library on page.



HTML

Add the Markup/HTML code for your accordion. 


            

                

                    

                        

                            Header Here
                        

                    

                

                

                    

                      Contents here

JS

Now call the akordeon initializer function and your accordion is ready.

$(document).ready(function () {
            $('.akordeon').akordeon();
        });




You can also customize accordian by using following options in your function.

$(document).ready(function () {
$('.akordeon').akordeon({

  // set the expanded item
  expandedItem: 0, 

  // animation speed
  expandSpeed: 200, 

  // is toggled
  toggle: false, 

  // expand text
  expandText: '–', 

  // collapse text
  collapseText: '+', 

  // shows/hides buttons
  buttons: true, 

  // hidden item
  hiddenItem: -1, 

  // sets the item order
  itemsOrder: []
 });
});

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.


Published by Rohit