title: Resizing a parent div with jQuery
body: <p>I'm trying to set up a page where when the user clicks on one of the letters within the 3 divs, that div resizes and "covers" up the other two divs on the screen - but I hit a brick wall with the jquery statement - I know it involves the resize function (and probably the css function) but I can't figure out for the life of me how exactly to do it.</p>
  
  <p>HTML/CSS</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div id="home" class="group"&gt;   &lt;span class="lettering" id="A"&gt;
              A
              &lt;/span&gt;
  
      &lt;/div&gt;
      &lt;div id="portfolio" class="group" style="margin-left: -4px;"&gt;   &lt;span class="lettering" id="P"&gt;
              P
              &lt;/span&gt;
  
      &lt;/div&gt;
      &lt;div id="contact" class="group" style="margin-left: -4px;"&gt; &lt;span class="lettering" id="C"&gt;
              C
              &lt;/span&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  
  html, body {
      font-size: 1em;
      background: #fff;
      height: 100%;
  }
  .container {
      width: 100%;
      height: 100%;
  }
  #home {
      background-color: #4D90FE;
  }
  .group {
      height: 100%;
      text-align: center;
      position: relative;
      display: inline-block;
  }
  #portfolio {
      background-color: #DD4B39;
  }
  #contact {
      background-color: #777777;
  }
  .lettering {
      color: #fff;
      font: bolder 7em'Bitter Bold';
      vertical-align: middle;
      position: relative;
  }
  </code></pre>
  
  <p>jQuery</p>
  
  <pre><code>jQuery(document).ready(function () {
      /*------------------------
      Set Divs to 1/3 Width of Screen
      ------------------------*/
      $(".group").css("width", ($(window).width() * 1 / 3));
      $(window).resize(function () {
          $(".group").css('height', $(window).height());
          $(".group").css("width", ($(window).width() * 1 / 3));
      });
      /*------------------------
      Vertically Center Div
      ------------------------*/
      $('.lettering').css("top", ($('.group').height() - $('.lettering').height()) / 2);
      /*-----------------------
      Expand Div on Element Click
      -----------------------*/
      $('.lettering').click(function () {
          $(this).parent().resize(function () {
              /* ??? */
          });
      });
  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/qg8Zd/" rel="nofollow">http://jsfiddle.net/qg8Zd/</a></p>