Repository navigation
<display> docs say open/close cannot be animated; ::display-content (new) allows animation #42226
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
openattribute. 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, which is in Baseline 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
openattribute.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 w/example of transition for a details expand/collapse
Do you have anything more you want to share?
Proposed change to fix this: 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: 7615562
- Document last modified: 2025-10-13T01:34:32.000Z
Activity
Khogendrarupini commentedon Dec 5, 2025
I would like to work on this issue.
Docs: update <details> animation docs to reference ::details-content (m…
Josh-Cena commentedon Aug 14, 2026
Happy to take a PR. Also note, "Try it" should not have content; this whole section should be moved to a separate one titled "Usage notes" that's below "Events" and above "Examples".
BHUVANSH855 commentedon Aug 18, 2026
hi, I tried to do this in #45218
Khogendrarupini commentedon Oct 16, 2026
I have opened PR #4 to address this issue 👍
The current documentation states that there is no built-in way to animate the opening and closing of the
<details>element. This statement is now outdated, as the::details-contentpseudo-element enables CSS transitions for the disclosure contentMy change updates the documentation to reference
::details-contentas the appropriate CSS mechanism for animating the transition between the open and closed statesI have kept the changes focused on the reported issue, leaving the existing examples and unrelated documentation unchanged
I hope this update helps keep the
<details>reference accurate and aligned with current CSS capabilities. I'm happy to make any adjustments based on your feedback.