How to Hide Sliding div on Document Ready
<p>I am trying to slide up and down a div (<code>.nav</code>) by clicking on another div (<code>#toggleMenu</code>) </p>

<p>Now my problem is when I run the page the (<code>.nav</code>) div pops up very fast. I used the  <code>$(".nav").hide();</code> to hide the div but this is happening after loading the (<code>.nav</code>) very fast.</p>

<p>here is the code I have </p>

<pre><code>$(document).ready(function() {
    $(".nav").hide(); 
    $("#toggleMenu").click(function () {
        $('.nav').slideToggle();
    });
});
</code></pre>

<p>and the css style is as:</p>

<pre><code>.nav {
    border: 0px solid #ccc;
    border-width: 0px 0;
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: left;
}
</code></pre>
