Fork me on GitHub
Post Format

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>

No related posts.

42 comments

  1. Pingback: 10 jQuery plugins for better website navigation - Free Wordpress Theme, Premium Wordpress Themes at Freshtheme.net

  2. Pingback: 20 Top Free jQuery Accordion Plugins and Tutorials of 2013

  3. Pingback: 25 Essential jQuery Plugin ToolKit for Developers - Baqar Abbas

  4. Pingback: 50 Most Useful jQuery Plugins from 2012

  5. Pingback: w3talks 50 полезных плагинов JQuery 2012 года » w3talks

  6. Pingback: 25 Fabulous Essential jQuery Plugin ToolKit for Developers | Smashing Spy

  7. Pingback: 转载-30个漂亮的jquery效果欣赏-爱果果 | iluther-专注web技术

  8. Pingback: A Comprehensive Showcase of Fresh-Cooked Resources and Freebies for Hungry Designers | Design Web Development Joomla Magento Wordpress Prestashop blog posts

  9. Pingback: Blodhemn ! | A Comprehensive Showcase of Fresh-Cooked Resources and Freebies for Hungry Designers

  10. Pingback: A Comprehensive Showcase of Fresh-Cooked Resources and Freebies for Hungry Designers | Senami Media

  11. Pingback: A Comprehensive Showcase of Fresh-Cooked Resources and Freebies for Hungry Designers | website design, official website, best websites, entertainment websites, american websites, cool websites

  12. Pingback: A Comprehensive Showcase of Fresh-Cooked Resources and Freebies for Hungry Designers

  13. Pingback: 爱果果 » 30个漂亮的jquery效果欣赏

  14. Pingback: 2012年30个新鲜和杰出的jQuery的影响摘要 | 我们爱网页设计

  15. Pingback: 12 Practical jQuery Accordion Menus and Sliders

  16. Pingback: JavaScript. Свежие скрипты | Last news — новости всемирной паутины

  17. Pingback: Tweet Heat – The hottest Tweets of the Month [April 2012] | Web design blog

  18. Pingback: Tweet Heat – The hottest Tweets of the Month [April 2012] « iTechTunes

  19. Pingback: 40 Recently Released jQuery Plugins

  20. Pingback: Tweet Heat - The hottest Tweets of the Month [April 2012] | Inspired Magazine

  21. Pingback: CSS – JQUERY – SLIDE SHOW – IMAGE EFFECT » “jQuery Useful Accordion Plugin”

  22. Pingback: 40 Recently Released jQuery Plugins

  23. Pingback: Stylish jQuery Accordion Plugin (FREE): Akordeon | EGrappler | Développement sites Web originaux | Scoop.it

  24. Pingback: Une sélection de 19 PlugIns, CMS ou démo pour les développeurs et concepteurs de sites web

  25. Pingback: 40 Recently Released jQuery Plugins | Typography Blog

  26. Pingback: What’s new for designers, April 2012 | Blue Sparrow Media

  27. Pingback: Stylish jQuery Accordion Plugin FREE: Akordeon | EGrappler | waltham taro blog

  28. Pingback: 2012년 4월 5일 it 기술 동향 |

  29. Pingback: Free jQuery Web Content Expand and Hide Animation « Web css jquery

  30. Pingback: Akordeon – Stylish jQuery accordion plugin - CodeVisually

  31. Pingback: Some Interesting jQuery Plugins « CSS Tips

  32. Pingback: Novos Plugins jQuery úteis e Tutoriais | Site para Empresas – Blog sobre Internet e Criação de Site

  33. Pingback: Some Interesting jQuery Plugins « CSS Tips

  34. Pingback: Some Interesting jQuery Plugins - Ottawa Web Designer, Developer - WordPress, Drupal, Mobile Design & Development - Wilder Tweedale

  35. Pingback: 19 бесплатных плагинов | Unaik

  36. Pingback: Akordeon - jQuery Plugin for add Accordion Menu to Web Page | Smashzine

  37. Pingback: StevenCodes | Code Snippets, jQuery Post | StevenCodes

  38. Pingback: All About jQuery: Fresh and Useful jQuery Plugins and Tutorials

  39. Pingback: Sacima鲨鳍马工作室 » Blog Archive » All About jQuery: Fresh and Useful jQuery Plugins and Tutorials

  40. Pingback: All About jQuery: Fresh and Useful jQuery Plugins and Tutorials | Neil Kearney Design

  41. Pingback: Stylish jQuery Accordion Plugin (FREE): Akordeon | EGrappler - EtondeGroup Blog of Web Applications | EtondeGroup Blog of Web Applications

Leave a Reply

Required fields are marked *.


eight − 3 =