Thanks, I was just going by the note on the MDN page.

I tried changing your example to have the transition be on the <detail> element itself instead of the child <p> but it didn't work, maybe that's what the MDN note is about.

https://m8y.org/tmp/testcase491.xhtml transition on <detail> And, yeah, the main "trick" is that it's tough to animate a height when the content is variable height. Thus the max-height and tweaked animation curve trick. But for many cases you'd probably want fixed height with scroll anyway.

Just be sure to use a keyframe to turn off the scroll when animating or it looks awful.