aria-expanded

Boolean

Indicates whether the collapsible content a control shows or hides is currently expanded or collapsed. Place it on the control that does the toggling, the button or header, not on the region being toggled. Keep it in sync with the actual visibility every time the state changes so screen readers announce 'expanded' or 'collapsed' correctly.

aria-expanded="…"

Values

true: The element, or the grouping element it controls, is expanded.
false: The element, or the grouping element it controls, is collapsed.
undefined (default): The element is not expandable.

Used on

Associated roles

Used in roles

application button checkbox combobox gridcell link listbox menuitem row tab treeitem

Inherits into roles

columnheader menuitemcheckbox menuitemradio rowheader switch

Example

aria-expanded="…"

<button aria-expanded="false" aria-controls="details1">
  More details
</button>
<div id="details1" hidden>
  Additional information…
</div>

References