jQuery simple: two functions colliding
<p>It's about the "Contato" item on menu. When you click it, it toggles height popping up and down the divs. Works fine. Plus that, I wanted to put an "X" button.</p>

<p>The problem is: when I click on "Contato", it pops up. I click on the X and it pops down. But if I click on "Contato" again, it only works if I do it twice.</p>

<p>Do you guys have any idea on how I can improve my poor jQuery to fix this problem?</p>

<p>this is live on:
<a href="http://www.arthurfalcao.com.br" rel="nofollow">http://www.arthurfalcao.com.br</a></p>

<pre><code>&lt;section id="contato"&gt;
            &lt;article id="info"&gt;
                &lt;p&gt;21 8668 1419&lt;/p&gt;
                &lt;p&gt;22 7836 4351&lt;/p&gt;
                &lt;p&gt;87*146596&lt;/p&gt;
                &lt;a href="mailto:artfalcao@gmail.com" title="E-mail para contato" target="_blank"&gt;artfalcao@gmail.com&lt;/a&gt;
            &lt;/article&gt;
            &lt;div class="contato"&gt;
                &lt;span class="close"&gt;X&lt;/span&gt;
                &lt;?php echo do_shortcode("[si-contact-form form='1']"); ?&gt;
            &lt;/div&gt;
        &lt;/section&gt;

        &lt;script&gt;
            jQuery("#menu-item-21 a").click(function () {
                jQuery(this).toggleClass("black");
            });
            jQuery("#menu-item-21").toggle(function(){
                jQuery("#contato").animate({height:375},600);
                jQuery("#info").animate({height:0},700);},
                function(){
                jQuery("#contato").animate({height:150},600);
                jQuery("#info").animate({height:115},700);
            });

        &lt;/script&gt;
        &lt;script&gt;
            jQuery(".close").click(function () {
                jQuery('#contato').animate({height:150},700);
                jQuery("#info").animate({height:115},700);
            });
            jQuery("#menu-item-21 a").click(function () {
                jQuery(this).removeClass("black");
            });         
        &lt;/script&gt;
</code></pre>
