Mootools: height of hidden elements

Morning all,

I'm trying to create a Mootools effect to show and hide replies to a comment on a discussion board. When the user clicks the "replies" link in the comment I want to increase the height of the comment container and then fade in the replies content. If the replies content is already visible, clicking on the link would reverse the effect.

I've got it sort of working, but I'm having trouble getting the correct height of my hidden elements (repliesH in my JS). I've tried getDimensions(), measure() and getComputedSize(), but they all give the same result: when elements are set to display:none I get a height that is too smal开发者_运维百科l; when I set them to display:block the height is correct. Can any kind person spot where I'm going wrong?

http://jsfiddle.net/andfinally/tVBCa/

Cheers Fred

=======================

A BIT LATER

Just noticed - the width of the .comments-list container seems to have something to do with this problem. When I remove that width the effect works OK. This probably means that getDimensions gets the height of an element when it's not nested in anything. Can anyone suggest how I can work out what the height'll be when it is nested?

Cheers Fred

you could use Fx.Reveal, it's very useful when u encounter these kind of problems, and it simplifies A LOT your code, i.e. (I've forked your example) => http://jsfiddle.net/steweb/DH27F/

A simple way to workaround it:

replies.show();
var repliesH = replies.getDimensions().y;            
replies.hide();

Just show it, get dimensions and hides it again. This runs so fast that neither is visible to the user.

Your updated Fiddle here.