HTML ontoggle Attribute

Introduction

The ontoggle attribute is an inline event handler that runs JavaScript when the toggle event fires. This happens when the open attribute is added or removed on a <details> or <dialog> element — for example when a user clicks a <summary> to expand an FAQ panel, or when a modal dialog opens and closes. Use it to track disclosure state, run analytics, or sync custom UI. It does not fire on checkboxes — use onchange for those. Prefer addEventListener("toggle", …) in production.

What You’ll Learn

Purpose of ontoggle Attribute

The primary purpose of ontoggle is to react when a disclosure widget or dialog changes between open and closed — so your page can update status text, lazy-load content inside a <details>, log analytics, or coordinate multiple accordion sections.

The toggle event fires after the open attribute changes. Check element.open inside your handler to know the new state. For checkboxes and switches, the browser fires change, not toggle.

📝 Syntax

Set ontoggle on <details> or <dialog>, or assign element.ontoggle in JavaScript:

<details ontoggle="handleToggle()">
  <summary>FAQ</summary>
  <p>Answer content.</p>
</details>

<script>
  el.ontoggle = handleToggle;
  el.addEventListener("toggle", handleToggle);
</script>

Syntax Rules

• Value is JavaScript executed when the toggle event fires.
• Valid on <details> and <dialog> elements.
• Fires when the open attribute is set or removed.
• Read event.target.open or element.open for current state.
• Also assignable as element.ontoggle in script.
• Modern alternative: addEventListener("toggle", handler).
• Not for <input type="checkbox"> — use onchange.

💎 Values

The ontoggle attribute accepts a string of JavaScript code:

• ontoggle="handleToggle()" — Call a named function.
• ontoggle="logState(event)" — Pass the event object in inline handlers.
• JavaScript: details.ontoggle = () => { … } — property assignment.

function handleToggle(event) {
  var el = event.target;
  status.textContent = el.open ? "Expanded" : "Collapsed";
}

details.addEventListener("toggle", function (event) {
  if (event.target.open) {
    loadFaqContent(event.target);
  }
});

Applicable Elements

ontoggle vs onchange vs onclick

Examples Gallery

Details disclosure handler, dynamic assignment, and dialog toggle with addEventListener.

<details ontoggle="toggleAction()">
  <summary>FAQ section</summary>
  <p>Answer content.</p>
</details>

<script>
  function toggleAction() {
    var d = document.querySelector("details");
    status.textContent = d.open ? "Expanded" : "Collapsed";
  }
</script>

<script>
  document.getElementById("dynamicToggle").ontoggle = function () {
    log.textContent = this.open ? "Now open" : "Now closed";
  };
</script>

dialog.addEventListener("toggle", function (event) {
  status.textContent = event.target.open
    ? "Dialog open"
    : "Dialog closed";
});

openBtn.addEventListener("click", () => dialog.showModal());
closeBtn.addEventListener("click", () => dialog.close());

♿ Accessibility

• Use native details/summary — Browsers provide keyboard support for disclosure widgets.
• Announce state changes — Use aria-live="polite" on status regions updated by toggle.
• Do not break summary — Keep <summary> as the first child of details.
• Dialog focus — Modals trap focus; ensure close controls are keyboard-accessible.
• Avoid alert() — Use visible on-page feedback for expand/collapse state.

💡 Best Practices