Nos bénévoles n'ont pas encore traduit cet article en Français. Inscrivez-vous et aidez-nous à réaliser cette tâche !
Vous pouvez également lire cet article en English (US).

The HTMLElement property hidden is a Boolean which is true if the element 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:

  • Content that isn't yet relevant but may be needed later
  • Content that was previously needed but is not any longer
  • Content that is reused by other parts of the page in a template-like fashion
  • Creating an offscreen canvas as a drawing buffer

Inappropriate use cases include:

  • Hiding panels in a tabbed dialog box
  • Hiding content in one presentation while intending it to be visible in others

Elements that are not hidden must not link to elements which are.

Syntax

isHidden = HTMLElement.hidden;


HTMLElement.hidden = true | false;

Value

A Boolean which is true if the element is hidden from view; otherwise, the value is false.

Example

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.

JavaScript

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.

HTML

The HTML for the two boxes are shown here.

The welcome panel

<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.

The follow-up panel

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>

CSS

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%;
}

Result

Specifications

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  

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome ? Edge Full support YesFirefox Full support 1IE ? Opera ? Safari ? WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android ? Safari iOS ? Samsung Internet Android ?

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown

See also

Étiquettes et contributeurs liés au document

Contributeurs à cette page : motiz88, fscholz, Sheppy
Dernière mise à jour par : motiz88,