I have an issue with animating the height of my nav with jquery - it makes me click the button twice

I have an issue with animating the height of my nav with jquery - it makes
me click the button twice

I have a nav to which the height is set to 0px. When i click on an element
(here, #menu_button) the nav's height is supposed to change to a given
height (here, 143px). This toggles it. My problem is that I'm made to
click the button twice the first time before it works properly. Please
help. Btw I'm new here.
Here's the code:
<nav>
<ul>
<a href="#port"><li><p>Portfolio</p></li></a>
<a href="#about"><li><p>About Me</p></li></a>
<a href="#contact"><li><p>Contact Me</p></li></a>
</ul>
</nav>
<div id="container_menu_button">
<div id="menu_button">
<div id="menu_pic"></div>
</div>
</div>
(css of the nav)
nav {
height:0px;
overflow:hidden;
}
(jquery)
<script>
$("#menu_button").click( function(event){
event.preventDefault();
if ($(this).hasClass("isDown") ) {
$("nav").animate({height:"143px"}, 200);
$(this).removeClass("isDown");
} else {
$("nav").animate({height:"0px"}, 200);
$(this).addClass("isDown");
}
return false;
});
</script>