vertical menu navigation with jquery (closing toggle)

Question

I have my vertical navigation working great with jQuery. It matches the URL, so it remains open on a dynamic site without cookies being required. This is my current fiddle here:

http://jsfiddle.net/J8HnC/

The jQuery that I'm using now is this:

jQuery('#categories .sub').not('.open').children('ul').hide();

jQuery(document).on('click', '#category-menu #categories button', function(){

    $(this).parent().addClass('expandable');

    if(jQuery(this).parent().hasClass('expandable')) {
        jQuery(this).html('+');
        jQuery(this).siblings('ul').stop(true,true).css('display','block').slideDown(200, 'linear');
    } else {
        jQuery(this).siblings('ul').stop(true,true).css('display','none').slideUp(200, 'linear');
    };

});

var url = window.location.toString() 

$('#categories ul li a').each(function(){

    var categoryHref= $(this).attr('href');

    if( url.match(categoryHref)) {
        $(this).addClass('active-anchor')
        $(this).parents('ul.category-child').show();
        $(this).parents('ul.category-child li').addClass('expandable');
    }

});

But I can't work out the logic to close the menu items properly in my jQuery. Any help would be greatly appreciated! :)

Answer 1

this should get you started.

add value="1" to each button in page.

then get the value and if it is equal to 1, basically open the menu. (what you have right now)

then set the value to 0.

if the value is 0, undo what you did. then set value to 1.

http://jsfiddle.net/J8HnC/2/