You're trying to call both functions at the same time. One function wants to increase the height of the div
, and the other wants to decrease the height of the div
.
Try something like this:
$("#hamburger").click(function(){
var maxHeight = 300;
if(+$('nav').height() < maxHeight) {
$('nav').stop().animate({ height: 300, opacity: 1 }, 'slow');
} else if (+$('nav').height() === maxHeight) {
$('nav').stop().animate({ height: 0, opacity: 0 }, 'slow');
}
});
To make it even shorter, you could do:
$("#hamburger").click(function(){
var maxHeight = 300,
nav = $('nav');
nav.stop().animate({ height: +nav.height() < maxHeight ? 300 : 0, opacity: +nav.css('opacity') === 1 ? 0 : 1 }, 'slow');
});
By the way, the random +
signs typecast any strings into numbers, just in case.