---
title: HTMLElement.hidden
slug: Web/API/HTMLElement/hidden
translation_of: Web/API/HTMLElement/hidden
---
<div>{{ APIRef("HTML DOM") }}</div>

<p>La propriété <strong><code>hidden</code></strong> de l'{{domxref("HTMLElement")}} est un {{jsxref("Boolean")}} qui vaut <code>true</code> si l'élément est caché, sinon sa valeur est <code>false</code>. Cela est très différent de l'utilisation de la propriété CSS {{cssxref("display")}} pour contrôler la visibilité d'un élément.</p>

<p>La propriété <code>hidden</code> s'applique à tous les modes de présentation et ne doit pas être utilisée pour cacher du contenu qui est destiné à être directement accessible par l'utilisateur.</p>

<p>Des cas d'utilisation appropriés de <code>hidden</code> comprennent :</p>

<ul>
 <li>du contenu qui n'est pas encore pertinent mais qui peut être nécessaire ultérieurement ;</li>
 <li>du contenu qui était nécessaire antérieurement mais qui ne l'est plus ;</li>
 <li>du contenu qui est réutilisé par d'autres parties de la page à la manière d'un modèle ;</li>
 <li>la création d'un canevas hors écran comme tampon de dessin.</li>
</ul>

<p>Des cas inappropriés d'utilisation comprennent :</p>

<ul>
 <li>le fait de cacher des panneaux dans une boîte de dialogue à onglets ;</li>
 <li>le fait de cacher du contenu dans une présentation tout en ayant l'intention qu'il soit visible dans d'autres.</li>
</ul>

<div class="note">
<p><strong>Note :</strong> Des éléments qui ne sont pas <code>hidden</code> ne doivent pas faire référence à des éléments qui le sont.</p>
</div>

<h2 id="Syntax">Syntaxe</h2>

<pre class="syntaxbox"><em>estCaché</em> = <em>HTMLElement</em>.hidden;

<em>HTMLElement</em>.hidden = true | false;</pre>

<h3 id="Valeur">Valeur</h3>

<p>Un Boolean qui est <code>true</code> si l'élément est caché à la vue ; sinon, la valeur est <code>false</code>.</p>

<h2 id="Example">Exemple</h2>

<p>Voici un exemple où un bloc caché est utilisé pour contenir un message de remerciement qui est affiché après qu'un utilisateur a accepté une demande inhabituelle.</p>

<h3 id="JavaScript">JavaScript</h3>

<pre class="brush: js">document.getElementById("boutonOk")
        .addEventListener("click", function() {
  document.getElementById("bienvenue").hidden = true;
  document.getElementById("impressionnant").hidden = false;
}, false);</pre>

<p>Ce code installe une gestionnaire pour le bouton "OK" du panneau de bienvenue, gestionnaire qui cache le panneau de bienvenue et rend le panneau de suite — ayant le curieux nom d'"impressionnant" — visible à sa place.</p>

<h3 id="HTML">HTML</h3>

<p>Le code HTML pour les deux boîtes est montré ci-dessous.</p>

<h4 id="Le_panneau_bienvenue">Le panneau bienvenue</h4>

<pre class="brush: html">&lt;div id="bienvenue" class="panneau"&gt;
  &lt;h1&gt;Bienvenue à Machin.com !&lt;/h1&gt;
  &lt;p&gt;En cliquant sur "OK", vous acceptez d'être impressionnant chaque jour !&lt;/p&gt;
  &lt;button class="bouton" id="boutonOk"&gt;OK&lt;/button&gt;
&lt;/div&gt;</pre>

<p>Ce code HTML crée un panneau (dans un bloc {{HTMLElement("div")}}) qui accueille les utilisateurs sur un site et leur dit ce qu'ils acceptent en cliquant sur le bouton OK.</p>

<h4 id="Le_panneau_de_suite">Le panneau de suite</h4>

<p>Une fois que l'utilisateur a cliqué sur le bouton "OK" dans le panneau d'accueil, le code JavaScript échange les deux panneaux en changeant leurs valeurs respectives pour <code>hidden</code>. Le panneau de suite ressemble à ce qui suit en HTML:</p>

<pre class="brush: html">&lt;div id="impressionnant" class="panneau" hidden&gt;
  &lt;h1&gt;Merci !&lt;/h1&gt;
  &lt;p&gt;Merci &lt;strong&gt;vraiment&lt;/strong&gt; beaucoup d'avoir accepté d'être
  impressionnant aujourd'hui ! Maintenant, sortez et faites des choses impressionnantes
  d'une façon impressionnante pour rendre le monde plus impressionnant !&lt;/p&gt;
&lt;/div&gt;</pre>

<h3 id="CSS">CSS</h3>

<p>Le contenu est mis en forme en utilisant le CSS ci-dessous.</p>

<pre class="brush: css">.panneau {
  font: 16px "Open Sans", Helvetica, Arial, sans-serif;
  border: 1px solid #22d;
  padding: 12px;
  width: 500px;
  text-align: center;
}

.bouton {
  font: 22px "Open Sans", Helvetica, Arial, sans-serif;
  padding: 5px 36px;
}

h1 {
  margin-top: 0;
  font-size: 175%;
}</pre>

<h3 id="Résultat">Résultat</h3>

<p>{{ EmbedLiveSample('Example', 560, 200) }}</p>

<h2 id="Spécifications">Spécifications</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Spécification</th>
   <th scope="col">Statut</th>
   <th scope="col">Commentaire</th>
  </tr>
  <tr>
   <td>{{SpecName('HTML WHATWG', "interaction.html#dom-hidden", "HTMLElement.hidden")}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5.1', "editing.html#the-hidden-attribute", "HTMLElement.hidden")}}</td>
   <td>{{Spec2('HTML5.1')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', "editing.html#the-hidden-attribute", "HTMLElement.hidden")}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>

<p>{{Compat("api.HTMLElement.hidden")}}</p>

<h2 id="Voir_aussi">Voir aussi</h2>

<ul>
 <li>{{domxref("Element.hidden")}}</li>
 <li>{{cssxref("display")}}</li>
</ul>