title: Partial to full expand/collapse w/ jQuery
body: <p>I'd like to write a function to allow to expand and collapse a div. It is not quite as straight forward though. If the div is more than 50px high I need to add an icon ("expand") to allow expanding it to a full height. And when it is fully expanded I need to change the style of the icon to ("collapse") and collapse it back to 50px. The icon needs to be position to the right bottom corner of the div.</p>
  
  <p>I can have multiple such divs on a page.</p>
  
  <p>Now, I can get a height of the div but how do I do it for each one on the page and onload?</p>
  
  <pre><code>var divHeight = $('.myDiv').height();
  
  if (divHeight &gt; 50) {
      $('.icon_collase').appendTo('.myDiv');
  }
  
  &lt;style&gt;
  .collasedDiv {
     max-height:50px;
  }
  &lt;/style&gt;
  
  $(".icon_collase").click(function() {
      $('.icon_collase').toggleClass('icon_collase icon_expand');
      $('.myDiv').addClass('collasedDiv');
  }
  
  &lt;div class="myDiv"&gt;
   // content here
  &lt;/div&gt;
  
  &lt;div class="myDiv"&gt;
   // another content here
  &lt;/div&gt;
  </code></pre>