Syntax
<p hidden>Not currently relevant</p>
element.hidden = false;Examples
Toggling Content with hidden: working example
Save as an HTML file and open it in a browser. Expected result: The answer begins hidden; the button reveals and hides it while updating its accessible expanded state.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Working example</title>
</head>
<body>
<button id="toggle" aria-controls="answer" aria-expanded="false">Show answer</button>
<p id="answer" hidden>The answer is 42.</p>
<script>
const toggle = document.querySelector("#toggle");
const answer = document.querySelector("#answer");
toggle.addEventListener("click", () => {
answer.hidden = !answer.hidden;
toggle.setAttribute("aria-expanded", String(!answer.hidden));
toggle.textContent = answer.hidden ? "Show answer" : "Hide answer";
});
</script>
</body>
</html>- Expected result: The answer begins hidden; the button reveals and hides it while updating its accessible expanded state.
- A present ordinary hidden attribute hides content, even if its value is the text false.
- The handler updates both visible wording and aria-expanded to match the state.
Best practices
- Do not override hidden accidentally with a conflicting display rule.
- Prefer details/summary when their built-in disclosure behavior meets the requirement.
Browser compatibility
Support applies to the named feature, not every attribute or behaviour in this article. Versions refer to browsers, not operating systems.
hidden
Desktop
- Chrome
- Supported
From 10 - Firefox
- Supported
From 4 - Safari
- Supported
From 5.1 - Edge
- Supported
From 12 - Opera
- Supported
From 15
Mobile
- Safari on iOS
- Supported
From 5 - Chrome for Android
- Supported
From 18 - Firefox for Android
- Supported
From 4 - Samsung Internet
- Supported
From 1.0
MDN BCD record for this feature · MDN reference
Support history and limitations
Chrome
- From 10
Firefox
- From 4
Safari
- From 5.1 · This attribute has no effect on <option> elements.
Edge
- From 12
Opera
- From 15
Safari on iOS
- From 5 · This attribute has no effect on <option> elements.
Chrome for Android
- From 18
Firefox for Android
- From 4
Samsung Internet
- From 1.0
HTMLElement.hidden
Desktop
- Chrome
- Supported
From 6 - Firefox
- Supported
From 4 - Safari
- Supported
From 5.1 - Edge
- Supported
From 12 - Opera
- Supported
From 11.6
Mobile
- Safari on iOS
- Supported
From 5 - Chrome for Android
- Supported
From 18 - Firefox for Android
- Supported
From 4 - Samsung Internet
- Supported
From 1.0
MDN BCD record for this feature · MDN reference
Support history and limitations
Chrome
- From 6
Firefox
- From 4
Safari
- From 5.1
Edge
- From 12
Opera
- From 11.6
Safari on iOS
- From 5
Chrome for Android
- From 18
Firefox for Android
- From 4
Samsung Internet
- From 1.0
MDN BCD 8.1.5 · Dataset built 2026-10-08 · Mapping reviewed 2026-10-21. These dates are not individual browser-test or claim-verification dates. Unknown means the data does not establish support.