This is from Lab2 “JQuery for practical website upgrades” with the glitch fixed.

Code:

jQuery(document).ready(function ($) {
    $("dd:not(:first)").hide();
    $("dt a").click(function () {
        if ($(this).parent().next().is(":hidden")) {
            $("dd:visible").slideUp("slow");
            $(this).parent().next().slideDown("slow");
        }
        return false;
    });
});

HTML:

<div class="sidebar-menu">
    <dl>
        <dt><a href="http://jquery.com/">jQuery</a></dt>
        <dd>
            <ul>
                <li><a href="http://jquery.com/src/">Download</a></li>
                <li><a href="http://api.jquery.com/">Documentation</a></li>
                <li><a href="http://jquery.com/blog/">Blog</a></li>
            </ul>
        </dd>
        <dt><a href="http://jquery.com/discuss/">Community</a></dt>
        <dd>
            <ul>
                <li><a href="http://jquery.com/discuss/">Mailing List</a></li>
                <li><a href="http://jquery.com/tutorials/">Tutorials</a></li>
                <li><a href="http://jquery.com/demos/">Demos</a></li>
                <li><a href="http://jquery.com/plugins/">Plugins</a></li>
            </ul>
        </dd>
        <dt><a href="http://jquery.com/dev/">Development</a></dt>
        <dd>
            <ul>
                <li><a href="http://jquery.com/src/">Source Code</a></li>
                <li><a href="http://jquery.com/dev/bugs/">Bug Tracking</a></li>
                <li><a href="http://jquery.com/dev/recent/">Recent Changes</a></li>
            </ul>
        </dd>
    </dl>
</div>

Problems/Mistakes/Bugs:

  • If we click on a menu that is already expanded it shrinks and expands again rather than staying shrinked.

Lessons Learnt:

  • There is always a solution somewhere for any problem. Try to google it!
  • Adding the line $(this).parent().next().is(":hidden") fixed the problem.

Implementation/Result:

jQuery
Community
Development