Experiments | jQuery Nested Accordion

jQuery experiments: Nested Accordion

This simple jQuery accordion plugin has multi-level support.

The plugin could easily be customized and used with any website.

It allows multiple instances of the accordion on the same page.

Three demonstrations are included in the demo page. The accordion in the Side Column uses all default options. For the two accordions in the Main Content Column, some of the default options are overridden (see below).

Getting started:

Overview

This script creates 'accordion' functionality on a hierarchically structured content, based on nested lists or nested div-s (see section 'Example markup' below).

The plugin has many options you can pass in at initialization (see section 'Usage' below).

The default options are for standard unordered lists.

The script generates <a>-tags with class="trigger" around the text nodes in LI elements or headings. These A elements are the triggers that handle the toggle action on the next collapsible sections.

If you use headings to show/hide the collapsible elements, you need to pass in an override option, for example, head:'h2, h3'. The script adds class="h" to the specified headings. So you should pass in the option el:'.h'.

If the structure is based on nested div-s and headings, the script wraps each pair of heading and next collapsible div in <div></div>. You need to pass in the option wrapper:'div'

If the collapsible element is a div, the script wraps it in <div class="outer"></div>. You need to pass in the option next:'div.outer'

See more in section 'Usage'.

Example markup

Nested Lists

<ul class="accordion">
    <li> Item 1
        <ul>
            <li> Sub 1.1
                <ul>
                    <li> Sub 1.1.1 </li> ...
                </ul>
            </li> ...
        </ul>
    </li> ...
</ul>

Nested Lists + Headings + DIVs

<ul class="accordion">
    <li>
        <h2>Heading</h2>
        <div>Some content here ... (optional)
            <ul>
                <li>
                    <h3>Heading</h3>
                    <div>Some content here ... </div>
                </li> ...
            </ul>
        </div>
    </li> ...
</ul>

Nested DIVs + Headings

<div class="accordion">
    <h2>Heading</h2>
    <div>Some content here ... (optional)
            <h3>Heading</h3>
            <div>
                Some content here ...
            </div>
            ...
    </div> 
    ...
</div>

Usage

Options

obj : 'ul', // the element that contains the accordion - 'ul', 'ol', 'div'
objClass : '.accordion', // the class name of the accordion
objID : '', // the ID of the accordion (optional)
wrapper :'li', // the common parent of 'a.trigger' and 'o.next' - 'li', 'div'
el : 'li', // the parent of 'a.trigger' - 'li', '.h'
head : '', // the headings that are parents of triggers (if any)
next : 'ul', // the collapsible element - 'ul', 'ol', 'div'
initShow : '', // the initially expanded section (optional)
showMethod : 'slideDown', // 'slideDown', 'show', 'fadeIn', or custom
hideMethod : 'slideUp', // 'slideUp', 'hide', 'fadeOut', or custom
showSpeed: 400,
hideSpeed: 800

Invoking the plugin

To call the plugin, add the following code in a $(document).ready() function inside the <head> of your HTML document:

1. To create accordions with different options in two different divisions of the page (for example #side and #main), you'll add a code like this:

$('#side').accordion(); // uses all default options

$('#main').accordion({el:'.h', head:'h2, h3', next:'div', initShow:'h2 + div.outer:eq(0)'});

2. To override some options for a specific element, specify the ID:

$('#main').accordion({objID: '#acc2', obj: 'div', wrapper: 'div', el: '.h', head: 'h2, h3', next: 'div.outer'});

Necessary files to reproduce the demo on your computer:

Place the script in a directory scripts and the images in a directory img, or edit the paths in the HTML document as needed.

Adi Palaz