title: JQuery: div slide to occupy full page
body: <p>We have a product page that we are dividing in two. My goal is to make it so that when you click one of the divs it slides to fill the whole page and show the products.</p>
  
  <p><a href="http://jsfiddle.net/Sj575/" rel="nofollow">http://jsfiddle.net/Sj575/</a> </p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div&gt;
      &lt;div id="green" class="type1"&gt;Exterior products&lt;/div&gt;
      &lt;div id="red" class="type2"&gt;Interior products&lt;/div&gt;    
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.type1 {
      width:300px;
      background-color:green;
      display:inline-block;
      height:320px;
  }
  .type2{
      width:300px;
      background-color:red;
      display:inline-block;
      height:320px;   
  }
  </code></pre>