jQuery menu acting strangely <p>on click, the div should move up and be mostly hidden, and then on click again, move back down to original position. Yea.... it's so not doing that. I used animate to move the div +100px, and then -100px, but it is not moving up and off the screen to be hidden. Instead, it moves DOWN, and then starts (I think) working.</p> <p><a href="http://jsfiddle.net/laurelrose18/LLdjh/7/" rel="nofollow">http://jsfiddle.net/laurelrose18/LLdjh/7/</a></p> <pre><code>#panel { } .menu { -webkit-border-bottom-left-radius:38px; -webkit-border-bottom-right-radius:38ßpx; border-bottom-left-radius:38px; border-bottom-right-radius:38px; background: $bluejeans; width: 100px; height:300px; padding-bottom: 25px; } .menu li { margin-bottom: .5em; list-style-type: none; } #menubtn { width: 100px; height: auto; max-width: 100px; margin-top: -100px; } .active { padding-top: 100px; } &lt;div class="container"&gt; &lt;div class="row slidemenu"&gt; &lt;div class="span2 offset10"&gt; &lt;div id="panel"&gt; &lt;ul class="menu flexbox"&gt; &lt;li class="smIcon"&gt;sk&lt;/li&gt; &lt;li class="smIcon"&gt;pr&lt;/li&gt; &lt;li class="smIcon"&gt;tk&lt;/li&gt; &lt;li class="hitext"&gt;menu&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div id="menulogo"&gt; &lt;a class="slidebtn" href="#"&gt;&lt;img src="images/monogram.png" alt="menu button" id="menubtn"&gt;&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;script type="text/javascript" src="js/jquery-1.10.1.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; $(document).ready(function(){ $(".slidebtn").click(function(){ $("#panel").toggleClass("active"); $("#panel").slideToggle("slow"); return false; }); }); &lt;/script&gt; </code></pre>