JavaScript Element ariaExpanded Property

What You’ll Learn

Element.ariaExpanded is an instance property that reflects the aria-expanded attribute. Learn the true, false, and undefined tokens, how they mark open or closed related content, and how to get or set the property from JavaScript—with five examples and try-it labs.

Introduction

Many widgets open and close related content: a disclosure button, an accordion section, a combobox list, or a menu. Assistive technologies need to know whether that content is currently expanded or collapsed.

aria-expanded carries that signal. ariaExpanded is the JavaScript reflection of that attribute.

const el = document.getElementById("animal");
console.log(el.ariaExpanded); // "false"
el.ariaExpanded = "true";

Understanding the Property

MDN: the ariaExpanded property of the Element interface reflects the value of the aria-expanded attribute, which indicates whether a grouping element owned or controlled by this element is expanded or collapsed.

• Reflected attribute — mirrors aria-expanded.
• Get / set — readable and writable string.
• Three tokens — true, false, undefined.
• Baseline — widely available since October 2023 (MDN).

📝 Syntax

ariaExpanded

Value

A string with one of the following values:

📋 Combobox (MDN Shape)

MDN shows a combobox that starts collapsed (aria-expanded="false"), then opens by setting ariaExpanded to "true":

<div class="animals-combobox">
  <label for="animal">Animal</label>
  <input
    id="animal"
    type="text"
    role="combobox"
    aria-autocomplete="list"
    aria-expanded="false"
    aria-haspopup="true" />
  <button id="animals-button" tabindex="-1" aria-label="Open">&#9661;</button>
  <ul id="animals-listbox" role="listbox" aria-label="Animals">
    <li id="animal-cat" role="option">Cat</li>
    <li id="animal-dog" role="option">Dog</li>
  </ul>
</div>

let el = document.getElementById("animal");
console.log(el.ariaExpanded); // false
el.ariaExpanded = "true";
console.log(el.ariaExpanded); // true

Also show or hide the listbox in the UI so sighted users and assistive tech stay aligned.

Examples Gallery

Examples follow MDN Element: ariaExpanded. Labs use a combobox-style input so you can safely read and write the property.

const el = document.getElementById("animal");
console.log(el.ariaExpanded);

// HTML includes: aria-expanded="false"

false

let el = document.getElementById("animal");
console.log(el.ariaExpanded); // false
el.ariaExpanded = "true";
console.log(el.ariaExpanded); // true

false
true

const el = document.getElementById("animal");

function setExpanded(open) {
  el.ariaExpanded = open ? "true" : "false";
  // Also show/hide the listbox (or panel) in the UI
}

setExpanded(true);
console.log("after open:", el.ariaExpanded);
setExpanded(false);
console.log("after close:", el.ariaExpanded);

after open: true
after close: false

const el = document.createElement("button");
el.setAttribute("aria-expanded", "false");
document.body.appendChild(el);

el.ariaExpanded = "true";
console.log({
  fromProperty: el.ariaExpanded,
  fromAttribute: el.getAttribute("aria-expanded"),
  same: el.ariaExpanded === el.getAttribute("aria-expanded")
});

{
  "fromProperty": "true",
  "fromAttribute": "true",
  "same": true
}

console.log({
  supported: "ariaExpanded" in Element.prototype,
  allowed: ["true", "false", "undefined"],
  tip: "Sync UI show/hide with ariaExpanded on every toggle",
  status: "Baseline Widely available (MDN)"
});

{
  "supported": true,
  "allowed": ["true", "false", "undefined"],
  "tip": "Sync UI show/hide with ariaExpanded on every toggle",
  "status": "Baseline Widely available (MDN)"
}

🚀 Common Use Cases

• Comboboxes and autocomplete popups.
• Disclosure / accordion headers that show or hide panels.
• Menus, listboxes, and tree expanders.
• Keeping script and markup aligned without manual setAttribute.
• Pairing with aria-controls / ariaControlsElements.

🔧 How It Works

📝 Notes

• Not Deprecated, Experimental, or Non-standard on MDN (Baseline Widely available).
• Values are strings: true, false, undefined.
• Keep visible open/close behavior in sync with the property.
• Related: ariaFlowToElements, ariaControlsElements, EventTarget, JavaScript hub.

💡 Best Practices