<display> docs say open/close cannot be animated; ::display-content (new) allows animation
- Dominant language
- Markdown
- Stars
- 11k
- Forks
- 23.2k
- Avg merge
- 2d 9h
- Merged PRs (30d)
- 331
Description
### MDN URL
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/details
### What specific section or headline is this issue about?
Try it
### What information was incorrect, unhelpful, or incomplete?
The "Try it" section in the Elements/details page incorrectly says
> You can use CSS to style the disclosure widget, and you can programmatically open and close the widget by setting/removing its [`open`](#open) attribute. *Unfortunately, at this time, there's no built-in way to animate the transition between open and closed.*
(emphasis mine)
That sentence predates the import of MDN into github, and is no longer correct. The transition can be animated using [::details-content](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/::details-content
), which is in [Baseline](https://developer.mozilla.org/en-US/docs/Glossary/Baseline/Compatibility) since September 2025.
### What did you expect to see?
Something similar to
> You can use CSS to style the disclosure widget, and you can programmatically open and close the widget by setting/removing its [`open`](#open) attribute.
>
> By default when closed, the widget is only tall enough to display the disclosure triangle and summary. When open, it expands to display the details contained within.
>
> To animate the transition between open and closed, use the {{cssxref("::details-content")}} pseudo-element.
### Do you have any supporting links, references, or citations?
[::details-content](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/::details-content
) w/example of transition for a details expand/collapse
### Do you have anything more you want to share?
Proposed change to fix this: https://github.com/mdn/content/compare/main...eivindeklund:mdn-content:patch-1
### MDN metadata
Page report details
* Folder: `en-us/web/html/reference/elements/details`
* MDN URL: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/details
* GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/html/reference/elements/details/index.md
* Last commit: https://github.com/mdn/content/commit/7615562a3689a3e23a2b6b623597f4391740a53e
* Document last modified: 2025-10-13T01:34:32.000Z
Contributor guide
Assessment
This issue has not been assessed yet.