The HTMLElement
property hidden
is a Boolean
which is true
if the document is hidden; otherwise the value is false
. This is quite different from using the CSS property display
to control the visibility of an element. The hidden
property applies to all presentation modes and should not be used to hide content that is meant to be directly accessible to the user.
Appropriate use cases for hidden
include:
Inappropriate use cases include:
Elements that are not hidden
must not link to elements which are.
isHidden = HTMLElement.hidden; HTMLElement.hidden = true | false;
A Boolean which is true
if the element is hidden from view; otherwise, the value is false
.
Here's an example where a hidden block is used to contain a thank you message that is displayed after a user agrees to an unusual request.
document.getElementById("okButton") .addEventListener("click", function() { document.getElementById("welcome").hidden = true; document.getElementById("awesome").hidden = false; }, false);
This code sets up a handler for the welcome panel's "OK" button that hides the welcome panel and makes the follow-up panel—with the curious name "awesome"—visible in its place.
The HTML for the two boxes are shown here.
<div id="welcome" class="panel"> <h1>Welcome to Foobar.com!</h1> <p>By clicking "OK" you agree to be awesome every day!</p> <button class="button" id="okButton">OK</button> </div>
This HTML creates a panel (in a <div>
block) that welcomes the user to a site and tells them what they're agreeing to by clicking the OK button.
Once the user clicks the "OK" button in the welcome panel, the JavaScript code swaps the two panels by changing their respective values for hidden
. The follow-up panel looks like this in HTML:
<div id="awesome" class="panel" hidden> <h1>Thanks!</h1> <p>Thank you <strong>so</strong> much for agreeing to be awesome today! Now get out there and do awesome things awesomely to make the world more awesome!</p> </div>
The content is styled using the CSS below.
.panel { font: 16px "Open Sans", Helvetica, Arial, sans-serif; border: 1px solid #22d; padding: 12px; width: 500px; text-align: center; } .button { font: 22px "Open Sans", Helvetica, Arial, sans-serif; padding: 5px 36px; } h1 { margin-top: 0; font-size: 175%; }
Specification | Status | Comment |
---|---|---|
HTML Living Standard The definition of 'HTMLElement.hidden' in that specification. | Living Standard | |
HTML 5.1 The definition of 'HTMLElement.hidden' in that specification. | Recommendation | |
HTML5 The definition of 'HTMLElement.hidden' in that specification. | Recommendation |
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | 4.0 (2) | (Yes) | (Yes) | (Yes) |
Feature | Android | Chrome for Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | (Yes) | 4.0 (2) | (Yes) | (Yes) | (Yes) |
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/hidden