Question

trying to toggle a div to expand and contract, it is basically a menu, with subnav. so i initially set height to 48px to hide subnav and in case there is no JS it will still look decent, I then assign a toggle to open and close the div (in this case set the height)

it keeps refreshing and automatically opening the div though. doesn’t want to stay open, just expands, gives alert, then closes again.

jQuery(document).ready(function($) { 
$('#nav-wrapper').css('height','48px');
  $('#menu-item-18').click(function() {
    var open = false;
    if(isOpen) {
      $('#nav-wrapper').animate({ height: '-=44' }, 0, function() {}); 
      var isOpen = false;
      alert ('not open')
    } else { 
      $('#nav-wrapper').animate({ height: '+=44' }, 0, function() {}); 
      isOpen = !isOpen; 
      alert ('open') 
    };
  });
}); 

might be way overcomplicating this. I’m sure there is a simpler solution too.

Answer 1

isOpen is defined in local scope and so the value will be always false. You need to move it outside click handler and then you just need isOpen = !isOpen; to toggle value. see below,

  $('#nav-wrapper').css('height','48px');
  var isOpen = false;

  $('#menu-item-18').click(function() {
    isOpen = !isOpen; 
    if(isOpen) {
      $('#nav-wrapper').animate({ height: '-=44' }, 0, function() {}); 
      alert ('not open')
    } else { 
      $('#nav-wrapper').animate({ height: '+=44' }, 0, function() {}); 
      alert ('open') 
    };
  });