title: Resize divs on slide
body: <p>I'd like the .left div (width:20%;) to slide into the .right div (initial width:100%;) and have the .right div resize on animation to width:80%;</p>
  
  <p>Basically, slide in a div and have the other resize.</p>
  
  <p><a href="http://jsfiddle.net/LTUTR/" rel="nofollow">http://jsfiddle.net/LTUTR/</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="container"&gt;
  
  &lt;div class="left"&gt;
      &lt;p&gt;left&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="right"&gt;
      &lt;p&gt;right content&lt;/p&gt;
      &lt;p class="showLeft"&gt;[Show left div]&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>​</p>
  
  <p>CSS</p>
  
  <pre><code>html, body {
      width:100%;
      height: 100%;
      margin: 0;
  }
  
  .container {
      width: 100%;
      height: 100%;
      position: relative;
      overflow: hidden;
  }
  
  .left, .right {
      float: left;
      height: 100%;
  }
  
  .left {
      background: green;
      width: 20%;
      display: none;
  }
  
  .right {
      background: red;
      width: 100%;
  }
  
  .showLeft {
      cursor: pointer;
  }
  ​
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>$('.showLeft').click(function(){
      $('.right').animate({width: '80%'},350);    
      $('.left').animate({width:'toggle'},350);
  });
  </code></pre>