Only the details element has the open attribute so you wouldn't hear about using it in CSS without hearing about it. BTW, you can use JavaScript to expand/collapse the element by setting and removing the attribute.
A downside to details/summary for footnotes is you can't find the footnote text in page using Cmd/Ctrl+F.
"Disclosure widgets" are a common pattern on the web so it's good that there's an HTML-native form of them. Two reasons why they're not used more is 1) they're HTML5 so IE didn't support them (neither did Edge before Chromium) and 2) the transition isn't currently animatable.
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.
A downside to details/summary for footnotes is you can't find the footnote text in page using Cmd/Ctrl+F.
"Disclosure widgets" are a common pattern on the web so it's good that there's an HTML-native form of them. Two reasons why they're not used more is 1) they're HTML5 so IE didn't support them (neither did Edge before Chromium) and 2) the transition isn't currently animatable.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/de...
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/su...