JavaScript Element toggleAttribute() Method

What You’ll Learn

Element.toggleAttribute() is an instance method that toggles a Boolean attribute — adding it when missing, removing it when present. Learn MDN’s disabled input demo, the optional force parameter, the boolean return value, comparison with setAttribute() and removeAttribute(), and five try-it labs aligned with MDN.

Introduction

Many HTML attributes are boolean: their presence means “on” and their absence means “off” — for example disabled, hidden, checked, and readonly.

element.toggleAttribute(name) flips that presence in one call (MDN). You do not need a separate if (hasAttribute) remove else set branch for simple toggles.

This page is part of JavaScript Element. Pair with hasAttribute(), setAttribute(), and removeAttribute().

Understanding the toggleAttribute() Method

Calling el.toggleAttribute(name) adds or removes a Boolean attribute named name (MDN).

• It is an instance method on Element.
• name — attribute name to toggle (lower-cased on HTML elements in HTML documents) (MDN).
• force (optional) — true forces add; false forces remove; omitted toggles (MDN).
• Returns true if the attribute is present after the call; otherwise false (MDN).
• Throws InvalidCharacterError for invalid attribute names (MDN).
• Ideal for boolean attributes; for valued attributes prefer setAttribute(name, value).

📝 Syntax

General form of Element.toggleAttribute (MDN):

toggleAttribute(name)
toggleAttribute(name, force)

Parameters

Return value

true if attribute name is eventually present; false otherwise (MDN).

Exceptions

InvalidCharacterError — name is empty or contains invalid characters such as ASCII whitespace, NULL, /, =, or > (MDN).

Common patterns

const input = document.querySelector("input");

// Toggle presence (MDN)
input.toggleAttribute("disabled");

// Force on / off
input.toggleAttribute("disabled", true);  // always add
input.toggleAttribute("disabled", false); // always remove

// Use return value
const isDisabled = input.toggleAttribute("disabled");
console.log(isDisabled); // true if disabled is now present

Examples Gallery

Examples follow MDN Element.toggleAttribute() patterns. Use View Output or Try It Yourself for each case.

const button = document.querySelector("button");
const input = document.querySelector("input");

button.addEventListener("click", () => {
  input.toggleAttribute("disabled");
});

Each click adds or removes disabled on the input.

const box = document.getElementById("box");

box.toggleAttribute("hidden", true);  // ensure hidden is present
console.log(box.hasAttribute("hidden")); // true

box.toggleAttribute("hidden", false); // ensure hidden is removed
console.log(box.hasAttribute("hidden")); // false

true
false

const btn = document.getElementById("mute");
const status = document.getElementById("status");

btn.addEventListener("click", () => {
  const muted = btn.toggleAttribute("aria-pressed");
  // aria-pressed is present when muted === true
  status.textContent = muted ? "Muted" : "Unmuted";
});

Muted
Unmuted

const panel = document.getElementById("panel");
const toggle = document.getElementById("toggle");

toggle.addEventListener("click", () => {
  const isHidden = panel.toggleAttribute("hidden");
  toggle.textContent = isHidden ? "Show panel" : "Hide panel";
});

Panel visibility flips; button label updates from return value.

const el = document.createElement("div");

try {
  el.toggleAttribute("ok-name");
  console.log("ok-name toggled");
  el.toggleAttribute("bad name"); // space is invalid (MDN)
} catch (err) {
  console.log(err.name); // InvalidCharacterError
}

ok-name toggled
InvalidCharacterError

🚀 Common Use Cases

• Enable / disable form controls with disabled (MDN demo).
• Show / hide panels with the hidden attribute.
• Toggle ARIA boolean-style flags such as aria-expanded presence patterns.
• Force attribute state from a boolean variable with force.
• Replace verbose if (has) remove else set branches for boolean attrs.
• Drive UI labels from the method’s boolean return value.

📝 Notes

• Not Deprecated, Experimental, or Non-standard on MDN (Baseline Widely available, October 2018).
• Designed for Boolean attributes; for valued attributes use setAttribute().
• HTML attribute names are lower-cased automatically in HTML documents (MDN).
• Invalid names throw InvalidCharacterError (MDN).
• Related: hasAttribute(), setAttribute(), removeAttribute(), JavaScript hub.

💡 Best Practices