JavaScript Element ariaExpanded Property

Beginner
5 min read
Updated: Nov 2026
3 examples
Property
Decorative image with the word ARIAEXPANDED

Definition

Element.ariaExpanded reflects the aria-expanded attribute: whether a grouping element owned or controlled by this element is expanded or collapsed (MDN).

Read the notes below before you get or set this property. Prefer feature detection when support is limited.

Syntax

Use el.ariaExpanded. Start with this line.

JavaScript
el.ariaExpanded;
CallWhat it does
el.ariaExpanded;Primary signature.

Built into the browser. Read or assign el.ariaExpanded — no import required.

Library declarations
JavaScript
el.ariaExpanded;

Parameters

ParameterDescription
PropertyRequired. el.ariaExpanded
ValuesRequired. "true" / "false" / "undefined"
UI syncRequired. Show/hide the controlled content

Return Value

Return ValueDescription
*The current value of el.ariaExpanded.

JavaScript Examples

Example 1 — Get and Set ariaExpanded (MDN)

Read the string, then expand the combobox control.

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

How It Works

  1. Select the control. MDN uses a combobox input with aria-expanded.
  2. Read ariaExpanded. Starts as the string "false".
  3. Assign "true". Reflects back to aria-expanded.
  4. Use strings only. Do not assign boolean true/false.

Example 2 — Toggle a Disclosure

Flip expand/collapse and show or hide the panel with hidden.

JavaScript
const btn = document.getElementById("more");
const panel = document.getElementById("panel");

btn.addEventListener("click", () => {
  const open = btn.ariaExpanded !== "true";
  btn.ariaExpanded = open ? "true" : "false";
  panel.hidden = !open;
});
Try It Yourself

How It Works

  1. Listen for click on the disclosure button.
  2. Compute the next open state from the current string value.
  3. Write ariaExpanded. Assistive tech learns open vs closed.
  4. Toggle hidden. Sighted users see the same state (CSS-free).

Example 3 — Mark as Not Expandable

Use the string "undefined" when the control does not own expandable content (MDN).

JavaScript
const el = document.getElementById("plain");
el.ariaExpanded = "undefined";
console.log(el.ariaExpanded); // "undefined"
console.log(el.getAttribute("aria-expanded")); // "undefined"
Try It Yourself

How It Works

  1. Assign the string "undefined". Not the JS value undefined alone.
  2. Meaning (MDN): this element does not control an expandable grouping.
  3. Prefer omitting the attribute when the control is never expandable.
  4. Use "true"/"false" only for real expand/collapse widgets.
Compatibility

Browser Support

Element.ariaExpanded is Baseline Widely available (MDN: since October 2023). Safe for modern evergreen browsers.

✓ Baseline · Widely available

ariaExpanded

Reflects aria-expanded as true/false/undefined for expand/collapse controls.

99% Widely available
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer IE 6+ · Legacy environments
Full support
Opera All modern versions
Full support
ariaExpanded Excellent

Bottom line: Use string values and keep the visible panel state in sync. Pair with aria-controls when you point at a region.

Frequently Asked Questions

It reflects the aria-expanded attribute as a string, indicating whether a grouping element owned or controlled by this element is expanded or collapsed (MDN).
No. MDN marks Element.ariaExpanded as Baseline Widely available (since October 2023). It is not Deprecated, Experimental, or Non-standard.
The strings "true" (expanded), "false" (collapsed), or "undefined" (the element does not own or control an expandable grouping) (MDN).
You assign the strings "true", "false", and "undefined" — not boolean literals. The property reflects the ARIA attribute value.
On controls that open or close related content: disclosures, accordions, comboboxes, menus, and similar widgets. Keep the visible open/close state in sync with the property.
ariaExpanded says whether the controlled content is open. ariaControlsElements (or aria-controls) points to which elements are controlled.

Next: ariaFlowToElements

Learn the element-reference property for alternate reading order.

ariaFlowToElements tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

11 people found this page helpful

JavaScript Element ariaErrorMessageElements Property JavaScript Element ariaFlowToElements Property