The HTML open attribute
Quick answer
The HTML open attribute shows the element in its open state (the details is expanded, or the dialog is shown non-modally). It is used on the <details> and <dialog> elements.
Overview
The open attribute shows the element in its open state (the details is expanded, or the dialog is shown non-modally). It applies to the <details> and <dialog> elements.
For a modal <dialog>, call dialog.showModal() in JavaScript instead of setting open — that also makes the backdrop inert and manages focus.
Syntax
<details open><summary>More</summary>Content</details>Values
| Value |
|---|
| A boolean attribute — present or absent. |
Example
<details open><summary>Click to toggle</summary><p>Now you can see me.</p></details>Best practices
- Use the open attribute to render a <details> or non-modal <dialog> open initially.
- Open a modal dialog with
showModal()rather than the attribute, to get focus trapping and a backdrop. - Give a <dialog> an accessible name and manage focus when it opens.
- Prefer these native elements over hand-built widgets.
Frequently asked questions
What does the open attribute do?
Shows a details/dialog in its open state.
How do I open a details element by default?
Add the boolean open attribute:
<details open>.Should I use the open attribute to show a modal?
No. For a modal <dialog>, call
showModal() in JavaScript so you get focus trapping and a backdrop.