Partial to full expand/collapse w/ jQuery
<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>
