# Bad value X for attribute “open” on element “details”.

> Canonical HTML version: https://rocketvalidator.com/html-validation/bad-value-x-for-attribute-open-on-element-details
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

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

```html
<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

```html
<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>
```