Stylish jQuery Accordion Plugin (FREE): Akordeon

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>

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

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>

View Demo

Download Source

EGrappler

Development Resources for Entrepreneurs

Stylish jQuery Accordion Plugin (FREE): Akordeon

Customizing Akordeon

Using Akordeon

Related Posts

38 comments

Leave a Reply Cancel reply

Premium WordPress/HTML Themes