mdn / mdn/content

<display> docs say open/close cannot be animated; ::display-content (new) allows animation

Open
#42,226 3 comments 0 reactions 0 assignees View on GitHub
accepting PR Content:HTML
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.