animate the expanding/collapsing of elements with arbitrary heights using max-height and overflow : auto

the only real caveat how big you make the max-height, you don't want to use too big a value for elements not holding much content; conversely, you don't want to use too small a value for elements holding a lot of content.

the main reason for this is you don't want a really fast animation for the former and a insanely fast animation for the latter.

now that we have the bad news out of the way, here's an example of how you can smoothly animate the expanding and collapsing of elements with arbitrary heights using CSS3 transitions: http://jsbin.com/ulawud/6