Skip to content

Stylish jQuery Accordion Plugin (FREE): Akordeon

Jump to bottom Edit New page
mshahbazsaleem edited this page Feb 16, 2012 · 1 revision

Akordeon is a stylish jQuery plugin for adding efficient accordion style menu to a web page. The idea behind Akordeon is to provide a lightweight and customizable interface for collapsible panels that can hold any kind of data in a limited space.

Akordeon 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.

Akordeon is based on Akordeon design freebie and is free to use.

Customizing Akordeon
  • expadedItem: Item to be expanded by default, first item is expanded by default
  • expadSpeed: Akordeon item expansion animation speed, default value 200
  • toggle: If true each item can be expand and collapse, default value false
  • buttons: Whether to display expand/collapse button on each item, default value true
  • expandText: Button text when item is expanded, default text '–'
  • collapseText: Button text when item is collapsed, default text '+'
  • hiddenItem: 0 based index of item that should be hidden, -1 means visible all
  • itemsOrder: Array of indexes if you want the plugin to reorder items
Using Akordeon
In your HTML file add the following references in the head section.
  • Add a reference to latest jQuery script
  • Add a reference to jquery.akordeon.js file
  • Add a reference to jquery.akordeon.css file
Add the Markup/HTML code for your accordion. e.g. 
  <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>

       &lt;div class="akordeon-item-head"&gt;
                &lt;div class="akordeon-item-head-container"&gt;
                    &lt;div class="akordeon-heading"&gt;
                        Header Here
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="akordeon-item-body"&gt;
                &lt;div class="akordeon-item-content"&gt;
                  Contents here
                &lt;/div&gt;
            &lt;/div&gt;
    &lt;/div&gt;</pre>



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


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


Here is the complete code for the example above.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Akordeon-A Stylo Modern jQuery Accordion Plugin</title>
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <link href="css/jquery.akordeon.css" rel="stylesheet" type="text/css" />
    <link href="css/demo.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery.akordeon.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('.akordeon').akordeon();
        });
    </script>
</head>
<body>
    <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>
        <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>
        <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>
    </div>
</body>
</html>


For more plugins and other useful web development resources, Visit http://www.egrappler.com
Add a custom footer
Add a custom sidebar
Clone this wiki locally