agile web

Home
Archive
Subscribe (RSS)
Random post

Catching Elephant is a theme by Andy Taylor

 

jQuery collapsible menu

I was trying to implement a collapsible menu using jQuery following John Resig’s  online tutorial. it was great, such a nice effect with little code, I found one problem with the effect though, when I tried to click on the menu item which was already open it animated the list items again, I searched for any fixes for this but was not able to fin one so I thought let me try to fix this, here is the JavaScript fix for that

JavaScript

$(function() {

    $(“dd:not(:first)”).hide();

    $(“dt a”).click(function() {

        var curr_dd = $(this).parent().next();

        if (curr_dd.css(“display”) != “none”)

            return;

 

        $(“dd:visible”).slideUp(“slow”);

        curr_dd.slideDown(“slow”);

        return false;

    });

});

HTML

<dl>

            <dt><a href=”#”>Menu 1</a></dt>

            <dd>

                <ul>

                    <li>List Item 1</li>

                    <li>List Item 2</li>

                    <li>List Item 3</li>

                </ul>

            </dd>

            <dt><a href=”#”>Menu 2</a></dt>

            <dd>

                <ul>

                    <li>List Item 1</li>

                    <li>List Item 2</li>

                    <li>List Item 3</li>

                </ul>

            </dd>

            <dt><a href=”#”>Menu 3</a></dt>

            <dd>

                <ul>

                    <li>List Item 1</li>

                    <li>List Item 2</li>

                    <li>List Item 3</li>

                </ul>

            </dd>

            <dt><a href=”#”>Menu 4</a></dt>

            <dd>

                <ul>

                    <li>List Item 1</li>

                    <li>List Item 2</li>

                    <li>List Item 3</li>

                </ul>

            </dd>

        </dl>