HTML open Attribute

Introduction

The open attribute is a boolean attribute used on <details> and <dialog> elements to control whether the widget is expanded or visible when the page loads. On <details>, add open to show the hidden content by default — perfect for FAQ sections where the first answer should be visible. On <dialog>, open makes the dialog appear (for modals, prefer showModal() in JavaScript). Users can still toggle <details> by clicking <summary>. Read and set element.open in JavaScript to change state programmatically.

What You’ll Learn

Purpose of open Attribute

The primary purpose of open is to set the initial visibility of a disclosure widget. Without open, a <details> element is collapsed when the page loads. With open, its content is expanded immediately — useful when the information is important enough to show without an extra click.

On <dialog>, open indicates the dialog is shown. For modal dialogs with backdrop and focus trapping, use dialog.showModal() in JavaScript instead of only the attribute. Pair <details> with <summary> for an accessible clickable heading.

📝 Syntax

Add the boolean open attribute to details or dialog:

<details open>
  <summary>FAQ question</summary>
  <p>Answer visible on load.</p>
</details>

<details>
  <summary>Another question</summary>
  <p>Collapsed by default.</p>
</details>

Syntax Rules

• Boolean attribute — presence means open; omit for closed/collapsed.
• Valid on <details> and <dialog>.
• Do not write open="false" — any value still opens the element in HTML.
• Always include <summary> as the first child of <details>.
• In JavaScript, use element.open = true or false.
• For modal dialogs, prefer dialog.showModal() over only open.
• Changing open fires the toggle event on details / dialog.

💎 Values

The open attribute is a boolean attribute — it has no meaningful value string:

• Present — The details or dialog is open when the page loads.
• Absent — The widget is collapsed or hidden by default.

<!-- Open by default -->
<details open>…</details>

<!-- Closed by default (omit open) -->
<details>…</details>

<!-- Wrong: still open in HTML -->
<details open="false">…</details>

Applicable Elements

open vs ontoggle vs hidden

Examples Gallery

Open vs closed details, dynamic .open in JavaScript, and a button that expands all FAQ items.

<details open>
  <summary>Click to toggle</summary>
  <p>This content is visible by default.</p>
</details>

<details>
  <summary>Click to toggle</summary>
  <p>This content is initially hidden.</p>
</details>

<details id="dynamicDetails">
  <summary>Click to toggle</summary>
  <p>Opened by JavaScript on load.</p>
</details>

<script>
  document.getElementById("dynamicDetails").open = true;
</script>

function setAllOpen(isOpen) {
  document.querySelectorAll("details.faq").forEach(function (panel) {
    panel.open = isOpen;
  });
  status.textContent = isOpen ? "All panels expanded" : "All panels collapsed";
}

♿ Accessibility

• Use summary — Always provide a descriptive <summary> as the clickable label for <details>.
• Do not overuse open — Expanding many sections by default can overwhelm screen-reader users scanning the page.
• Keyboard support — <summary> is focusable and activatable with Enter/Space by default.
• Dialog focus — Use showModal() for modals so focus is trapped and Escape closes the dialog.
• State is announced — Assistive tech reports expanded/collapsed state on details.

💡 Best Practices