Stylish jQuery Accordion Plugin – Akordeon

by Posted on

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.

 <script src="js/jquery.min.js" type="text/javascript"></script>
 <link href="css/jquery.akordeon.css" rel="stylesheet" type="text/css" />
 <script src="js/jquery.akordeon.js" type="text/javascript"></script>



HTML

Add the Markup/HTML code for your accordion.

<div class="akordeon">
            <div class="akordeon-item">
                <div class="akordeon-item-head">
                    <div class="akordeon-item-head-container">
                        <div class="akordeon-heading">
                            Header Here
                        </div>
                    </div>
                </div>
                <div class="akordeon-item-body">
                    <div class="akordeon-item-content">
                      Contents here
                    </div>
                </div>
            </div>

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: '&ndash;', 
 
  // 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 admin