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 small; 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/