title: jQuery function to move a div left/right when clicking another div
body: <p>Yes, this sounds like a simple question, and it probably is. But when i am implementing some of the solutions I an finding, not of them are working.</p>
  
  <p>Basically I have a main content div and behind that div I have a small sidebar div that I would like to animate out from behind the main div when i click on an element. Seems simple? Well my head can't quite code it right.. Also, jQuery noob here if we are going to be completely honest:</p>
  
  <p>Here is the relevent HTML:</p>
  
  <pre><code>        &lt;div id="clickme" style="z-index: 900; background-color:Black; width: 50px; height: 50px;"&gt;&lt;/div&gt;
  
      &lt;div id="superMain"&gt;
          &lt;div id="leftFlyout"&gt;&lt;/div&gt;
          &lt;div class="main"&gt;&lt;asp:ContentPlaceHolder ID="MainContent" runat="server"/&gt;&lt;/div&gt;
          &lt;div id="rightFlyout"&gt;&lt;/div&gt;
      &lt;/div&gt;    
  </code></pre>
  
  <p>Here is the CSS</p>
  
  <pre><code>#rightFlyout
  {
  width: 75px;
  height: 400px;
  background-color: Red;
  position: absolute;
  top: 0;
  left: 875px;
  
  }
  
  #leftFlyout
  {
  float:left;
  width: 75px;
  height: 400px;
  background-color: Red;
  position: absolute;
  top: 0;
  left: 10px;
  
  }
  
  #superMain
  {
  position:relative;
  }
  .main
  {
  border-left:1px solid black;
  border-right:1px solid black;
  border-bottom:1px solid black;
  padding: 0px;
  padding-top: 10px;
  margin: 0px auto;
  min-height: 420px;
  height:auto;
  width: 940px;
  background-color: White;
  z-index: 10;
  }
  </code></pre>
  
  <p>annnnnnd, the jQuery (the whole header in case i messed that up too somehow)</p>
  
  <pre><code>&lt;head runat="server"&gt;
  &lt;script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="Scripts/jquery-1.4.1.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;title&gt;&lt;/title&gt;
  &lt;link href="~/Styles/Site.css" rel="stylesheet" type="text/css" /&gt;
  &lt;asp:ContentPlaceHolder ID="HeadContent" runat="server"&gt;
  &lt;/asp:ContentPlaceHolder&gt;
  &lt;script&gt;
      $('#clickme').toggle(function () {
  
          $('#rightFlyout').animate({
              left: '+=200'
          }, 458, 'swing', function () {
  
              // Animation complete. CALLBACK?
  
          });
  
      }, function () {
  
          $('#leftFlyout').animate({
              left: '-=200'
          }, 458, 'swing', function () {
  
              // Animation complete. CALLBACK?
  
          });
  
      });
  &lt;/script&gt;
  &lt;/head&gt;
  </code></pre>
  
  <p>Please help! And if it is a ridiculously dumb mistake I am making, please mock relentlessly. </p>