Stylish jQuery Accordion Plugin – Akordeon
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.
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: '–', // 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.