HTML open Attribute

The HTML open attribute is a Boolean attribute used with the <details> and <dialog> elements. On <details>, it determines whether the additional information is shown. On <dialog>, it indicates that the dialog is active and available for interaction.

Elements That Use the open Attribute

The open attribute is used with the <details> and <dialog> elements.

Element	Description
`<details>`	Specifies that the additional information in the disclosure widget is shown.
`<dialog>`	Specifies that the dialog is active and can be interacted with.

Boolean Attribute

The open attribute is a Boolean attribute. Its presence represents the open state, while its absence represents the closed state.

<details open>
  ...
</details>

Because open is Boolean, writing open="false" does not close the element. The attribute is still present, so the element is considered open. To represent the closed state, omit the attribute.

Using open with <details>

A <details> element is closed by default. When the open attribute is present, both the <summary> and the additional content are initially shown.

<details open>
  <summary>HTML Attributes</summary>
  <p>HTML attributes provide additional information about elements.</p>
</details>

The user can normally select the <summary> to open or close the disclosure widget. As the state changes, the browser adds or removes the open attribute.

Using open with <dialog>

When the open attribute is present on a <dialog>, the dialog is active and can be interacted with.

<dialog open>
  <p>This dialog is open.</p>
</dialog>

A dialog opened by specifying the open attribute directly is a non-modal dialog. It does not place the dialog in the top layer or make the rest of the document inert.

Dialog Methods

JavaScript provides the show() and showModal() methods for opening dialogs. The show() method opens a non-modal dialog, while showModal() opens a modal dialog and places it in the top layer.

dialog.show();
dialog.showModal();
dialog.close();

For dialogs controlled dynamically, use the dialog methods rather than manually adding and removing the open attribute. In particular, manually removing open from a dialog opened with showModal() can interfere with the dialog's normal closing behavior.

Styling the Open State

CSS can select elements according to whether the open attribute is present. An attribute selector can be used to style an open <details> element.

details[open] {
  background-color: #f2f2f2;
}

Modern CSS also provides the :open pseudo-class for elements that have an open state, including open <details> and <dialog> elements.

details:open {
  background-color: #f2f2f2;
}

Common Mistakes

Do not use open="false" when you want an element to be closed. Because open is Boolean, its presence represents the open state regardless of the assigned text value.

Do not assume that <dialog open> creates a modal dialog. The open attribute alone displays a non-modal dialog; use showModal() when modal behavior is required.

When dynamically controlling a <dialog>, do not manually remove open as a replacement for the dialog's closing methods. Use close() or the appropriate dialog closing behavior instead.

Do not confuse the open attribute with the CSS :open pseudo-class. The attribute represents an HTML state on <details> and <dialog>, while :open is a CSS selector that can also match other elements with an open state.

Browser Support

Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.

The open attribute is widely supported on both <details> and <dialog> elements in current core browsers.

Checking Browser Support

For current browser compatibility information, visit Can I Use? . Search for the HTML element or attribute you want to check. You can also narrow your search by entering an element name and attribute name separated by a colon. Search results can include related HTML features, element attributes, input types, APIs, and other technologies, so select the result that most closely matches the feature you are checking.

Try the open Attribute

The first <details> element includes the open attribute and is initially expanded. The second does not include open and is initially collapsed. Select either summary to change its open state.

Play in Editor

Summary

The HTML open attribute represents the open state of <details> and <dialog> elements. It is a Boolean attribute, so its presence represents the open state and its absence represents the closed state. For dynamically controlled dialogs, the dialog methods provide the appropriate way to open and close them.