a simple accordion menu with jquery Apr
20
1
0

I've seen a lot of bloated scripts trying to attach an accordion effect onto a nested menu that just end up being slow, buggy, complicated, and hard to extend. I think people are over thinking things . If you're using JQuery it's easy enough to write this functionality yourself.

working example

Lets say your HTML looks something like this:

<ul id="accordion">
    <li>
        <h1>First</h1>
        <ul>
            <li><a href="#">section</a></li>
            <li><a href="#">section</a></li>
            <li><a href="#">section</a></li>
        </ul>
    </li>

    <li>
        <h1>Second</h1>
        <ul>
            <li><a href="#">section</a></li>
            <li><a href="#">section</a></li>
            <li><a href="#">section</a></li>
        </ul>
    </li>

    <li>
        <h1>Third</h1>
        <ul>
            <li><a href="#">section</a></li>
            <li><a href="#">section</a></li>
            <li><a href="#">section</a></li>
        </ul>
    </li>
</ul>

You can easily initialise and attach the accordion functions like so:

$(document).ready(function() {
    // initialise
    $('ul#accordion > li > ul').hide();
    $('ul#accordion > li:first-child > ul').show();

    // accordion
    $('ul#accordion > li > h1').click(function() {
        // do nothing if already expanded
        if($(this).next().css('display') == 'none') {
            $('ul#accordion > li > ul').slideUp();
            $(this).next().slideDown();
        }
    });
});

I hope you find this code simple and easy to extend.

Bookmark and Share
blog comments powered by Disqus