title: Jquery: how to toggle/slide one div over another so it takes its place?
body: <p>My goal is to to create an animation (css / jquery), so green box slides (grows) over red one (red one is fixed).
  Then toggle it back : green shrinks and red comes back again.</p>
  
  <p>Using ("#green").css("wdith") makes the red one being pushed and I want to avoid that.</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;script type="text/javascript" src="js/jquery-1.11.1.min.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;style&gt;
  .green {
      width:400px;
      background-color:green;
      display:inline-block;
      height:320px;
  }
  .red{
      width:200px;
      background-color:red;
      display:inline-block;
      height:320px;   
  }
  &lt;/style&gt;
  
  
  &lt;div&gt;
  &lt;div id="green" class="green"&gt;eezez&lt;/div&gt;
  &lt;div id="red" class="red"&gt;eezez&lt;/div&gt;
  
      &lt;script&gt;
      $(function() {
          $("#action").click(function() {
              // toggle so green grows and takes red place (red does not move)
              // toggle so green shrinks and so red takes his initial place again
          });
      });
  &lt;/script&gt;
  
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>here is the fiddle:</p>
  
  <p><a href="http://jsfiddle.net/Sj575/" rel="nofollow">http://jsfiddle.net/Sj575/</a></p>