Question

I’m trying to accomplish a simple thing.
I have a 2 levels menu with nested ULs.
The inner ULs are set as display:none, so only the main categories are shown.
I would like to preventDefault onclick behaviour on the main categories and fade in their respective inner ULs aside.

My html is this:

<nav id="type-navigation">
    <ul id="nav_categories" class="subs">
        <li><a href="#">Category 1</a>
                <ul>
                <li><a href="#">Link1</a></li>
                <li><a href="#">Link2</a></li>
                <li><a href="#">Link3</a></li>
                </ul>
        </li>
        <li><a href="#">Category 2</a>
                <ul>
                <li><a href="#">Link1</a></li>
                <li><a href="#">Link2</a></li>
                <li><a href="#">Link3</a></li>
                </ul>
        </li>
</ul>
</nav>

I would like to do this using Jquery. When I click on the first category, its children UL should be shown aside with FadeIn. When I click on another category, the previously shown UL should FadeOut and the other categories UL should FadeIn.

This is my Jquery and it’s not working as expected:

$("ul li a").toggle(function() { 
                  $(this).children("ul").fadeIn("slow");
                  },
                   function() { 
                 $(this).children("ul").fadeOut("slow"); 
                });

Answer 1

Assuming that your <ul> next to your <a> are hidden with css display:none :

$(".subs > li > a").click(function() {
    $(this).parents('.subs').find('ul').hide();
    if($(this).next("ul").is(":visible")) {
            $(this).next("ul").fadeOut("slow");
    }    else {
        $(this).next("ul").fadeIn("slow");
    }
    return false;
});