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

i have nav height set 0px. when click on element (here, #menu_button) nav's height supposed change given height (here, 143px). toggles it. problem i'm made click button twice first time before works properly. please help. btw i'm new here.

here's 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 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>     

you need click twice because menu_button div not have 'isdown' class begin with. first time click it, animates 0px (which is) , adds class. then, second time click works expected.

do this:

<div id="menu_button" class="isdown">