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.
<!-- Basic disclosure widget --><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> <!-- Pre-opened on page load --><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.
<!-- Exclusive accordion: only one open at a time --><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 attribute makes it visible but non-modal --><dialog open> <p>This dialog is visible on page load, but is not modal.</p> <button onclick="this.closest('dialog').close()">Close</button></dialog> <!-- Prefer showModal() for modal behavior --><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.
<style> /* Style open vs closed details */ details[open] summary { font-weight: bold; border-bottom: 1px solid var(--color-border); margin-bottom: 0.5rem; } /* Rotate the marker when open */ details[open] > summary::marker { color: var(--color-primary); }</style>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.
<script>const details = document.querySelector('details'); // Listen for open/close changesdetails.addEventListener('toggle', () => { console.log(details.open ? 'Opened' : 'Closed');}); // Programmatic controldetails.open = true; // expanddetails.open = false; // collapse</script>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 prefershowModal()over theopenattribute — it ensures proper focus management and keyboard behavior.
Limitations
- The
nameattribute 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
opendirectly on a<dialog>in markup creates a non-modal dialog with no backdrop or focus trapping, which is rarely what you want. - The
toggleevent is not cancellable — you cannot prevent the state change from within the handler.