Question

I have a a drop down menu that uses toggle and is triggered when a + character is clicked (element with the .plusminus class). When the toggle is fired the + sign is also toggled to `display: none’ whilst a – (minus) sign is toggled to display instead.

The trouble is clicking the minus sign will not trigger the drop down menu to toggle again – it only works when the + sign is showing.

Would anyone know what I have done wrong?

Thanks

$('#menu li:has(ul)').each(function() {   
    $(this).append( "<span class='submenuplus plusminus'> &#43; </span>" );
    $(this).append( "<span class='submenuminus plusminus'> &#45; </span>" );   
});

$('#menu').on('click','.plusminus',function() {
    $(this).prev("ul").slideToggle("slow"),
    $('.submenuminus, .submenuplus').toggle();
});

Answer 1

I cleaned up the click event for you. Try something like the following

$('#menu li:has(ul)').each(function() {   
    $(this).append( "<span class='submenuplus plusminus'> &#43; </span>" );
    $(this).append("<span class='submenuminus plusminus'> &#45; </span>");
    $(this).find('.submenuminus').hide();    
});

$('#menu .plusminus').click(function(){
    $(this).prevAll("ul").slideToggle("slow"),
    $(this).parent().find('.plusminus').toggle();
});​

One issue that is tripping you up is the use of

$(this).prev("ul")

This returns the nested <ul> for the + sign, but not for the - sign, because .prev([selector]) only finds the immediate sibling matching the selector. The <ul> is not an immediate sibling of the - sign’s <span> (The <span> with the + sign is in between the two), so you must instead use .prevAll([selector]).