title: Slide a div in from off screen and then back on toggle
body: <p>I am trying to move a div in from off screen and then back on toggle</p>
  
  <pre><code>$('a.show').on('click',function() {
  if($('#left-navi-designers').css('left')=='0px'){
      $('#left-navi-designers').animate({left: '-100%'}, 1000);        
  }else{
      $('#left-navi-designers').animate({left:0}, 1000); 
  }
  });
  </code></pre>
  
  <p>That is what i have for the JavaScript. I have this for my CSS:</p>
  
  <pre><code>#left-navi-designers {
  height: 100%;
  position: fixed;
  background: #fff;
  width: 100%;
  left: -100%;
   }
  </code></pre>
  
  <p>This is my HTML:</p>
  
  <pre><code>&lt;div id="left-icons"&gt;&lt;a class="show" style="color:#999;"&gt;DUH!&lt;/a&gt;&lt;/div&gt;
  &lt;div id="left-navi-designers"&gt;
   &lt;div id="topNavigation"&gt;
  &lt;ul class="topLevelNavigation"&gt;
  &lt;a href=".topLevelNavigation" class="button"&gt;&lt;li&gt;DESIGNERS&lt;/li&gt;&lt;/a&gt;
  &lt;a href=".topLevelNavigation2" class="button"&gt;&lt;li&gt;EMERGING&lt;/li&gt;&lt;/a&gt;
  &lt;a href=".topLevelNavigation3" class="button"&gt;&lt;li&gt;STUDIOS&lt;/li&gt;&lt;/a&gt;
  &lt;a href=".topLevelNavigation4" class="button"&gt;&lt;li&gt;NEW FACES&lt;/li&gt;&lt;/a&gt;
  &lt;a href=".topLevelNavigation5" class="button"&gt;&lt;li&gt;EDITORS&lt;/li&gt;&lt;/a&gt;
  &lt;a href="#box1" class="button"&gt;&lt;li&gt;MEDIA KIT&lt;/li&gt;&lt;/a&gt;
  &lt;a href="#box1" class="button"&gt;&lt;li&gt;BEAUTY&lt;/li&gt;&lt;/a&gt;
  &lt;a href="#box1" class="button"&gt;&lt;li&gt;BRANDS&lt;/li&gt;&lt;/a&gt;
  &lt;a href="#box1" class="button"&gt;&lt;li&gt;MODELS&lt;/li&gt;&lt;/a&gt;
  &lt;a href="#box1" class="button"&gt;&lt;li&gt;PARTIES&lt;/li&gt;&lt;/a&gt;
   &lt;/ul&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I'm very new to this and am just trying to get some things figured out. Here is the site i am playing on <a href="http://keithfrenchdesigns.com/RunwayMag/designers_main.html" rel="noreferrer">http://keithfrenchdesigns.com/RunwayMag/designers_main.html</a></p>
  
  <p>Thanks in advance!</p>