n-Leveled Accordion

If you're familiar with the jQuery Accordion menu, the n-Leveled Accordion plugin or Multi Accordion plugin allows you to have an accordion menu with as many submenu levels as you want. First, let's take a look at how it works.

demo

Now that you've seen it, let's talk about how to use it in your website. Here are the steps in the order they must be followed:

  1. You load the jQuery library, used by the plugin.

    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

  2. You load the plugin (the minified version, or the full version if you'd like to make any adjustements to it).

    <script type="text/javascript" src="js/jquery.multiAccordion.min.js></script>

  3. You initialize the plugin with its parameters when the DOM is ready.

    <script type="text/javascript">
        $(function(){
            var opened = [];
            var onClass = 'on';
            $('ul.left_menu').multiAccordion(opened,onClass);
        });
    </script>

And you're all set!
Now, as you can see, the Multi Accordion plugin accepts two parameters:
- an array of indexes (1-based) of the first level submenu which you would like opened by default
- the class that you would like to use for the selected element in the menu

Examples:

You can specify one or more elements to be opened, like this:

// The first menu element opened by default:
var opened = [1];

// The second and fourth menu elements opened by default:
var opened = [2,4];

And you can also initialize the plugin in a single line, without separately defining the parameters:

<script type="text/javascript">
    $(function(){
        $('ul.left_menu').multiAccordion([],'on');
    });
</script>

You can download the plugin below. The archive includes an example and the full and minified versions of the plugin.

download the plugin

The plugin works with jQuery 1.2 and higher.

For those of you who haven't seen it before,
    $(function(){ code goes here });
is a shorthand for
    $(document).ready(function(){ code goes here });

For any questions, requests or any idea you would like to share with me, plase contact me here.