title: jQuery animate function - hide and stretch divs
body: <p>I have a page with divs as;</p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;div id="header"&gt;&lt;/div&gt;
      &lt;div id="sidebar"&gt;
          &lt;div id="switch"&gt;&lt;/div&gt;
          &lt;div id="list"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="viewer"&gt;&lt;/div&gt;
      &lt;div id="footer"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>id <code>switch</code> is a trigger, which is meant to toggle animation. On 1st click, it should shrink the width of <code>sidebar</code> to 5px and width of <code>list</code> to 0px, and the margin-left of <code>switch</code> to 5px and the left of <code>viewer</code> to 5px. When user again click the trigger, everything may return to previous state and positions. In short i want to toggle hide/show sidebar. The animations should be some sliding effect towards left and then towards right.</p>
  
  <p>You can have a look at what I am talking about <a href="http://jsfiddle.net/blasteralfred/EzAV2/" rel="nofollow noreferrer"><strong>here</strong></a> and an updated fiddle <a href="http://jsfiddle.net/EzAV2/7/" rel="nofollow noreferrer"><strong>here</strong></a>.</p>