Setting the `open` attribute on a `<details>` element should open it

[andrew-polk]

Have you read the Contributing Guidelines on issues?

• [X] I have read the Contributing Guidelines on issues.

Prerequisites

• [X] I'm using the latest version of Docusaurus.
• [ ] I have tried the npm run clear or yarn clear command.
• [ ] I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• [ ] I have tried creating a repro with https://new.docusaurus.io.
• [ ] I have read the console error message carefully (if applicable).

Description

Given a <details> element, adding the open attribute should be enough to toggle the element open and display its content.

However, the css rules used to toggle the display of the content is not written to allow for that because they are added to and removed from the content element. If, instead, it were part of a selector like

details[open] > div {
  display: none;
  overflow: hidden;
  height: 0px;
}

then toggling the open attribute would be enough to toggle the display of the content.

A specific scenario where this is important is being able to expand the contents of the <details> elements before printing. This should be possible through a simple addition of an attribute rather than adding the attribute AND manipulating css.

Reproducible demo

No response

Steps to reproduce

1. Create a docusaurus site with a <details> element (or use https://docusaurus.io/docs/markdown-features#details).
2. From the dev tools console, set the open attribute to true. (e.g. document.querySelectorAll('details')[0].open = true)

Expected behavior

The <details> element should toggle to the open state (displaying its content).

Actual behavior

Nothing happens. The contents of the <details> element remain hidden.

Your environment

Reproducible from https://docusaurus.io/docs/markdown-features#details.

Self-service

• [ ] I'd be willing to fix this bug myself.

[slorber]

Agree we should support this

Our Details component behavior is not ideal, and does not progressively-enhance well. CF related issue: https://github.com/facebook/docusaurus/issues/10055

I had to use some tricks to get the animations working but apparently they are not good enough 😅 We should implement Details differently in the future and refactor it entirely.