title: How to detect and change div height in jQuery
body: <p>let me start by saying that due to the complicated design of the layout I ended up writing a function called equalHeights which basically looks at several divs in my layout and picks the highest and sets the height of rest to that, so that I can end up with divs that have equal heights. So basically after the page load, if you look into the code you will see style="height:xxx" is applied to each div. This I cannot change so any solution cannot touch this functionality.</p>
  
  <p>The divs also have overflow set to hidden which again has its purpose and cannot change.</p>
  
  <p>So with the above in mind, what I need to do is to be able to change the height of the divs based on changes due to user interactivity. For example I have a table with some hidden rows which get expanded as the user clicks on a link. The extra lenght of the table will then be hidden due to overflow, I need the size of the div to expand. At the same time I don't want to bind this expansion to that specific click, I want Javascript to detect change in the content and expand my div accordingly. The reason I don't want it bind like that is because I need this implemented in different pages with the same layout and I don't want to code for every event.</p>
  
  <p>I have tried both:</p>
  
  <pre><code>$("#myDiv").resize(function(){
      equalHeight($("#myDiv"));
  });
  </code></pre>
  
  <p>and</p>
  
  <pre><code>$("#myDiv").content().resize(function(){
      equalHeight($("#myDiv"));
  });
  </code></pre>
  
  <p>neither seem to work! Any ideas?</p>