jQuery Nested Accordion Menu

Learn how to create a nested accordion menu with jQuery. This tutorial will show you several different accordion menus how to create them. jQuery code and HTML samples are provided for each accordion in this guide.

Contents

Nested accordion

Using mouseover

With images

Adding expand and collapse buttons

Demo

Nested accordion

This is an example of the standard accordion. The code will use a mouse click to expand or collapse the menus. The other examples will be a variation of the one shown below.

Code

$(document).ready(function () {
    var parentDivs = $('#nestedAccordion div'),
        childDivs = $('#nestedAccordion h3').siblings('div');

    $('#nestedAccordion h2').click(function () {
        parentDivs.slideUp();
        if ($(this).next().is(':hidden')) {
            $(this).next().slideDown();
        } else {
            $(this).next().slideUp();
        }
    });

    $('#nestedAccordion h3').click(function () {
        childDivs.slideUp();
        if ($(this).next().is(':hidden')) {
            $(this).next().slideDown();
        } else {
            $(this).next().slideUp();
        }
    });
});

HTML

You’ll need to use a certain format for the accordion to work. Use the example shown below as a template for your HTML.

<div id="nestedAccordion">
    <h2>Parent 1</h2>
    <div>
        <h3>Child 1</h3>
         <div>Sub 1</div>
         <h3>Child 2</h3>
         <div>Sub 2</div>
    </div>
    <h2>Parent 2</h2>
    <div>
        <h3>Child 1</h3>
        <div>Sub 1</div>
    </div>
</div>

Nested accordion with mouseover

This version will use a mouseover to make the menu expand or collapse. You can change the mouseover sensitivity by increasing or decreasing the JavaScript variable called sensitivity. Increasing the variable will cause the mouseover to become less sensitive and decreasing it will cause it to become more sensitive.

Code

$(document).ready(function () {
    var parentDivs = $('#nestedAccordion div'),
        childDivs = $('#nestedAccordion h3').siblings('div'),
        h2Event,
        h2Temp,
        h3Event,
        h3Temp,
        sensitivity = 400;

    $('#nestedAccordion h2').mouseenter(function () {
        h2Temp = $(this);
        parentDivs.slideUp();
        h2Event = setTimeout(function () {
            dropDown(h2Temp);
        }, sensitivity);
    });

    $('#nestedAccordion h3').mouseenter(function () {
        h3Temp = $(this);
        childDivs.slideUp();
        h3Event = setTimeout(function () {
            dropDown(h3Temp);
        }, sensitivity);
    });

    //prevents accordion actions from queueing
    $('#nestedAccordion h2').mouseleave(function () {
        clearTimeout(h2Event);
    });

    //prevents accordion actions from queueing
    $('#nestedAccordion h3').mouseleave(function () {
        clearTimeout(h3Event);
    });
});

//logic for the accordion effect
function dropDown(selector) {
    if (selector.next().is(':hidden')) {
        selector.next().slideDown();
    } else {
        selector.next().slideUp();
    }
}

Nested accordion with images to show opened and closed state

This sample will let you represent a menu’s opened or closed state by using images. Replace the JavaScript variables img1 and img2 with the path to your images. The variable img1 will be for your opened image and the variable img2 will be for your closed image.

Code

$(document).ready(function () {
    var parentDivs = $('#nestedAccordion div'),
        childDivs = $('#nestedAccordion h3').siblings('div'),
        img1 = 'opened url',
        img2 = 'closed url';

    $('#nestedAccordion h2').click(function () {
        parentDivs.slideUp();
        $('#nestedAccordion h2').find('img').attr('src', img2);
        $('#nestedAccordion h3').find('img').attr('src', img2);
        if ($(this).next().is(':hidden')) {
            $(this).next().slideDown();
            $(this).find('img').attr('src', img1);
        } else {
            $(this).next().slideUp();
            $(this).find('img').attr('src', img2);
        }
    });
    $('#nestedAccordion h3').click(function () {
        childDivs.slideUp();
        $('#nestedAccordion h3').find('img').attr('src', img2);
        if ($(this).next().is(':hidden')) {
            $(this).next().slideDown();
            $(this).find('img').attr('src', img1);
        } else {
            $(this).next().slideUp();
            $(this).find('img').attr('src', img2);
        }
    });
});

HTML

The html is very similar to the original example. The only difference between this sample and the original is that this version will use an image tag within each of the header tags.

<h2><img src='url'>Walt Disney World</h2>
<div>
     <h3><img src='url'>Magic Kingdom</h3>
    <div>
        <ol>...</ol>
    </div>
</div>

Expand and collapse buttons

Adding buttons to expand and collapse your accordion is easy. Use the JavaScript and HTML sample shown below to help you get started.

Code

Add the following code sample to the rest of your JavaScript. Make sure it’s placed in the same area where the parentDivs and childDivs are defined.

$('#expand').click(function () {
    parentDivs.slideDown();
    childDivs.slideDown();
    return false
});

$('#collapse').click(function () {
    parentDivs.slideUp();
    childDivs.slideUp();
    return false
});

HTML

Place the sample below near your accordions HTML. You can adjust the positioning of the buttons by using CSS. If you modify the ID of any of the buttons you will need to update the JavaScript so that it references the correct buttons.

<a id="expand" href="#">Expand</a>
<span> | </span>
<a id="collapse" href="#">Collapse</a>

Nested accordion demo

Take a look at the standard nested accordion in action with this demo page. If you have any questions or comments feel free to post them below.