[jQuery] Getting the height of a hidden div in Firefox

[rob303]

Hi,

I've been working on this for days.  The chaps on IRC couldn't find an
answer so I thought I'd post it here just in case anyone knows what's
going on.

I have a basic accordion type feature.  The designer wants to be able
to open more than one of hidden the sections at once ...

So, here is my code:

$(".accordion .accordion_header").click(function() {
    if($(this).hasClass('accordion_selected')) {
          $(this).removeClass('accordion_selected').next().slideUp
({duration: 'slow', easing: 'easeInOutQuad'});
        } else {
          $(this).addClass('accordion_selected').next().slideDown
({duration: 'slow', easing: 'easeInOutQuad'});
        }
  }).next().hide();

.accordion {
  width: 97%;
  list-style-type: none;
}

.accordion_header {
  display: block;
  height: 20px;
  background: url(../images/bgd_accordion_off.gif) repeat-x;
  padding: 5px 10px 0 10px;
}

.accordion_header:hover {
  background: url(../images/bgd_accordion_on.gif) repeat-x;
  color: #d7d7d9;
}

.accordion_selected {
  background: url(../images/bgd_accordion_on.gif) repeat-x;
  color: #d7d7d9;
}

.accordion_section {
  display: block;
  line-height: 20px;
  padding: 0 10px 0 10px;
}

<ul class="accordion">
  <li>
    <a href="javascript:;" class="accordion_header">heading</a>
    <div class="accordion_section">
      A bunch of text
    </div>
  </li>
</ul>

The problem I face is that the content within the hidden div
(accordion_section) is db driven so I have no idea what content to put
in there.  This means I cannot fix the height of those divs.  This in
turn breaks the animate on the slideDown function.  If I set the
height of the div the animate is perfect.  Without it everythings all
jumpy and broken looking.  So I figured that all I needed to do was to
get the height of the hidden div and then apply it using  a css()
call.  This works fine in IE but Firefox doesn't seem able to give me
the correct height for the div.  For example if I use this code:

var h = $(this).next().height();
alert(h);

IE gives me 240 - which correct for that particular div.  But firefox
gives 160 for the same div! Anyone know why?

Many thanks in advance for any help.

Rob.