Question

I have a number of nested lists and some jQuery that shows hides them when a parent header is clicked.

IT works fine but the behaviour is slightly wrong. If a nested list is visible and the parent header is clicked i would like that nested list to be hidden. At the moment it does this but then shows the nested list directly after.

Please see this jsFiddle for working code:

http://www.jsfiddle.net/4kG2b/

Answer 1

You can trigger the show if the sibling <ul> is hidden currently (effectively making it a toggle), like this:

    $nestList.filter(":hidden").show("fast", function() {
        $(this).closest("li").removeClass("closed").addClass("open");
    });

You can test it out here. Overall you can slim it down and get the same effect though, like this:

$("#expander ul").hide();
$("#expander h4").live("click", function() {
    $(this).siblings("ul").toggle("fast", function(){
        $(this).closest("li").toggleClass("open closed");
    }).closest("li").siblings(".open").toggleClass("open closed")
                    .children("ul").hide("fast");

    $(".scroll").jScrollPane();
});

You can try that version out here.