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.
Stylish jQuery Accordion Plugin


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>


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 class="akordeon-item-body">
                    <div class="akordeon-item-content">
                      Contents here


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

$(document).ready(function () {

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

$(document).ready(function () {
  expandedItem: 0, 
  expandSpeed: 200, 
  toggle: false, 
  expandText: '&ndash;', 
  collapseText: '+', 
  buttons: true, 
  hiddenItem: -1, 
  itemsOrder: []

See live demo and download source code.


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.