HTML Guides for open

The open attribute on <details> is a boolean attribute, so it doesn't take values like "true" or "false".

A boolean attribute is on when it's present and off when it's absent. HTML allows only two values for one: the empty string (open="") or the attribute's own name (open="open"). Anything else, such as "true", "false", "1" or "yes", is invalid, and the validator quotes the value it found in the message.

Browsers only check whether the attribute is there, so open="false" still renders the <details> element expanded. To start it collapsed, leave the attribute out.

This often happens when a template prints a boolean variable straight into the attribute, as in open="{{ is_open }}". Output the bare open attribute when the condition is true and nothing when it's false. In JavaScript, set the open property instead (details.open = false). It takes a real boolean and adds or removes the attribute for you.

Invalid example

<details open="true">

<summary>Shipping details</summary>

<p>Orders ship within two business days.</p>

</details>

<details open="false">

<summary>Return policy</summary>

<p>Returns are accepted within 30 days.</p>

</details>

Valid example

<details open>

<summary>Shipping details</summary>

<p>Orders ship within two business days.</p>

</details>

<details>

<summary>Return policy</summary>

<p>Returns are accepted within 30 days.</p>

</details>