Change height in jquery only working once

Question

I've got a set of product listings that each have a link below them with a click event on it, when this is clicked it goes to the parent class, finds the class "surf_prod1" below and slideToggles it. Where a function that checks through all divs with a class of "surf_prod" and gets the biggest innerHeight which is passed back and used as the height for all divs with class of "surf_prod".

This works fins for the first click, however subsequent ones, have no effect, and only the initial height seems to have effect, not sure if this is due to some form of caching?

Hopefully someone can help.

Here's my html:

<div class="surf_prod">
<img height="300" border="0" alt="7'2" - Egg" src="product_images/takayama_egg_7_2_egg_l0242_front.jpg"/><br/>
<span style="height: 35px;"><b id="review1615">7'2" - Egg</b></span><br/>
<div valign="top" class="surf_prod1">
 <p style="margin-bottom: 2px;"><b>N : </b>16 1/4</p>
 <p style="margin-bottom: 2px;"><b>M : </b>21 1/4</p>
 <p style="margin-bottom: 2px;"><b>T : </b>14 3/4</p>
 <p style="margin-bottom: 2px;"><b>Th : </b>2 3/8</p>
</div>
<span style="margin: 0px;"><b>FINS</b></span><br/>
<div class="surf_prod1">
 <p><b>Centre : </b>US 8" TAK 4.5</p>
 <p><b>Side : </b>FCS M5</p>
</div>
 <div class="review_box">
 <a class="review_link" href="#review1615"><b style="cursor: pointer; text-decoration: underline; color: rgb(204, 0, 0);" title="Click For Review">Board Review</b></a>
 <div style="text-align: left; display: none;" class="surf_prod1 review_body">If you're not quite ready to "rip and shred" on a short board, nor are you apt to "cruise" on a long board, then the Hawaiian Pro Designs Egg is the perfect solution. This model is an "eggy" looking shape that allows the rider to trim high on the wave in the middle of the board or race down the line on the tail, whichever the rider prefers. This board is also a perfect beginners board because of the overall forgiving shape that allows for a variety of mistakes without loss of speed or manoeuvrability.<br/><a href="http://www.surfcom.co.uk/app/content_prod/5/1615"&gt;&lt;b&gt;More&lt;/b&gt;&lt;/a&gt;&lt;/div&gt;
</div>
</div>

and my JavaScript:

function equalHeight(group) {
var tallest = 0;
group.each(function() {
    thisHeight = $(this).innerHeight(true);
    if(thisHeight > tallest) {
        tallest = thisHeight;
    }
  });
  return tallest;
}

$(document).ready(function(){
$(".review_body").slideUp("fast");

$(".review_link").click(function(ev){
 ev.preventDefault();

 var link = $(this).attr('href');

 //Get the review container to be able to manipulate the children of it
 $(this).parent(".review_box").find(".surf_prod1").slideToggle("fast", function(){

   var surf_prod_height = equalHeight($("div.surf_prod"));
  $("div.surf_prod").height(surf_prod_height);

  document.location = link;
 });

});

});

Example here.

Answer 1

Once you set the height, it no longer depends on the content, so the second time through, you are getting the same height for all of the divs--the height you set the first time.

Try setting the height to "auto" before you find the desired height:

$("div.surf_prod").height("auto");
var surf_prod_height = equalHeight($("div.surf_prod"));
$("div.surf_prod").height(surf_prod_height);