open

Toggle visibility of details disclosure widgets and dialog elements. A boolean attribute that controls whether expandable or overlay content is currently shown.

Overview

The open attribute is a boolean attribute that controls the visibility of expandable content. It applies to two elements:

<details> — controls whether the disclosure widget is expanded or collapsed
<dialog> — controls whether the dialog is visible (non-modal)

When open is present, the content is shown. When absent, it is hidden.

Details Element

On <details>, the open attribute determines whether the content below the <summary> is visible. Users can toggle it by clicking the summary. Add open in markup to have the section expanded on page load.

<details> <summary>System requirements</summary> <ul> <li>64-bit processor</li> <li>4 GB RAM minimum</li> <li>2 GB free disk space</li> </ul> </details>  <details open> <summary>Getting started</summary> <p>Follow these steps to set up your account.</p> </details>

Exclusive Accordions with name

The name attribute on <details> creates an exclusive accordion group. When multiple <details> elements share the same name, opening one automatically closes the others — no JavaScript required.

<details name="faq"> <summary>How do I reset my password?</summary> <p>Go to Settings, then Security, then click "Reset Password".</p> </details> <details name="faq"> <summary>Can I change my username?</summary> <p>Usernames can be changed once every 30 days from your profile page.</p> </details> <details name="faq"> <summary>How do I cancel my subscription?</summary> <p>Visit Billing and click "Cancel Plan" at the bottom of the page.</p> </details>

Dialog Element

On <dialog>, the open attribute makes the dialog visible as a non-modal overlay. However, for modal dialogs you should use showModal() instead, which adds the open attribute automatically and also provides backdrop, focus trapping, and Escape-to-close behavior.

<dialog open> <p>This dialog is visible on page load, but is not modal.</p> <button onclick="this.closest('dialog').close()">Close</button> </dialog>  <dialog id="confirm-dialog"> <p>Are you sure?</p> <button onclick="this.closest('dialog').close()">Cancel</button> <button onclick="this.closest('dialog').close('confirmed')">Confirm</button> </dialog> <button onclick="document.getElementById('confirm-dialog').showModal()"> Delete Item </button>

Approach	Backdrop	Focus Trap	Escape to Close	Top Layer
`open` attribute	No	No	No	No
`showModal()`	Yes	Yes	Yes	Yes
`show()`	No	No	No	No

Styling Open State

Use the [open] attribute selector to style expanded details or visible dialogs.

JavaScript Events

The toggle event fires on <details> when its open state changes, whether by user interaction or script. The open property reflects the current state.

Accessibility

Screen readers announce <details> as a disclosure widget with its expanded/collapsed state.
The <summary> element is focusable and activatable via keyboard (Enter and Space).
For <dialog>, always prefer showModal() over the open attribute — it ensures proper focus management and keyboard behavior.

Limitations

The name attribute for exclusive accordion groups is relatively new. Older browsers will treat each <details> independently.
There is no built-in animation for <details> open/close transitions. CSS transitions on height require workarounds.
Setting open directly on a <dialog> in markup creates a non-modal dialog with no backdrop or focus trapping, which is rarely what you want.
The toggle event is not cancellable — you cannot prevent the state change from within the handler.