Setting Height Back To 0 After Toggling A Class

I have the following HTML and JS. When you click the .slidedown-toggle it toggles the class 'open' on it's parent (.slidedown) and applies the height to it's sibling (.nav-sub).

Solution 1:

$( '#global-nav li.open' ) will return a jQuery object which will always be truthy, you need to check whether the li to which current toggle element belongs to has the class open.

You can use .closest() to find the li element and then use .hasClass() to check whether the class is present

$(function navCollapse() {

    var slidedownToggle = $('#global-nav .slidedown-toggle');

    slidedownToggle.click(function () {
        var slidedown = $(this).parent('.slidedown');
        var $li = $(this).closest('li');
        var subnav = $(this).siblings('.nav-sub');
        var subnavHeight = subnav.height();

        slidedown.toggleClass('open');

        if ($li.hasClass('open')) {
            subnav.height(0);
        } else {
            subnav.height(subnavHeight);
        }

    });

});

Solution 2:

LIVE DEMO

  var $gNav = ('#global-nav');

  $('.slidedown-toggle', $gNav).click( function( e ) { 

    var myLI = $(this).closest('.slidedown');
    var isON = myLI.hasClass('open');

    // ALL
    $('li.open', $gNav).removeClass('open').find('.nav-sub').slideUp();

    // THIS
    myLI.toggleClass('open', !isON).find('.nav-sub').stop().slideToggle();  

  });