jQuery / Méthode / .toggle() - Afficher ou masquer les éléments

Dans jQuery, .toggle() masque chaque élément affiché et montre chaque élément masqué. .toggle(true) impose l’affichage, .toggle(false) le masquage et .toggle(800) anime la transition. Choisissez entre inverser l’état actuel et définir un état connu.

Inversion immédiate, état explicite et animation

L’API .toggle() change display immédiatement sans argument. Avec Alpha visible et Beta masqué, un appel masque Alpha et montre Beta. Il ne synchronise pas toute la collection dans le même état.

Les effets temporisés changent largeur, hauteur et opacité. Après masquage, display:none retire l’espace de mise en page. 800ms représente 0,8 seconde ; une valeur supérieure ralentit. Le booléen false et le nombre zéro sont des formes différentes. Masquer ne supprime ni les valeurs saisies ni les autres états du modèle objet du document (DOM).

Exemple complet avec deux panneaux

Enregistrez tout le code en UTF-8 dans toggle-demo.html et ouvrez-le dans le navigateur. Internet charge le fichier jQuery officiel complet 4.0.0 depuis le réseau de diffusion de contenu (CDN). Les effets temporisés nécessitent effects : ne remplacez pas le fichier par slim. Les interactions et l’extrait de console ont été exécutés avec 3.7.1 et 4.0.0.

Alpha utilise flex ; Beta commence masqué. Les commandes restent à l’extérieur. Choisissez immédiat, 800ms, 200ms ou 0ms. busy ignore les demandes supplémentaires pendant un effet. La préférence système de mouvement réduit force une durée zéro.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Toggle each panel visibility</title>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
  <style>
    body { font: 16px/1.6 sans-serif; max-width: 760px; margin: 24px auto; padding: 16px; }
    button, select, input { font: inherit; margin: 4px; max-width: 100%; box-sizing: border-box; }
    .panel { padding: 12px; margin: 10px 0; border: 1px solid teal; background: #edf9f6; }
    #alpha { display: flex; flex-wrap: wrap; align-items: center; }
    #beta { display: none; }
    pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
</head>
<body>
  <h1>Toggle independently or set a known state</h1>
  <label for="mode">Mode:</label>
  <select id="mode"><option value="instant">No arguments</option><option value="800">800ms</option><option value="200">200ms</option><option value="0">0ms</option></select>
  <button type="button" id="toggle">Toggle each</button>
  <button type="button" id="show">Show both</button>
  <button type="button" id="hide">Hide both</button>
  <button type="button" id="reset">Reset</button>
  <div id="panels">
    <div class="panel" id="alpha">Alpha <input aria-label="Alpha note" value="Keep this note"></div>
    <div class="panel" id="beta">Beta panel</div>
  </div>
  <pre id="result" aria-live="polite"></pre>
  <script>
    $(function () {
      const $panels = $("#panels > .panel");
      let busy = false, completed = 0;
      function report() {
        const visible = $panels.filter(":visible").map(function () { return this.id; }).get();
        $("#result").text(`visible=${visible.join(",") || "(none)"}\ncompleted=${completed}\nbusy=${busy}\nDOM panels=${$panels.length}`);
      }
      function settle() { $panels.stop(true, true); busy = false; completed = 0; }
      $("#toggle").on("click", function () {
        if (busy) return;
        completed = 0;
        const mode = $("#mode").val();
        if (mode === "instant") { $panels.toggle(); report(); return; }
        if (!$panels.length) { report(); return; }
        busy = true; report();
        const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
        $panels.toggle({ duration: reduced ? 0 : Number(mode), complete: function () {
          completed++;
          if (completed === $panels.length) busy = false;
          report();
        } });
      });
      $("#show").on("click", function () { settle(); $panels.toggle(true); report(); });
      $("#hide").on("click", function () { settle(); $panels.toggle(false); report(); });
      $("#reset").on("click", function () {
        settle(); $("#alpha").toggle(true); $("#beta").toggle(false);
        $("#alpha input").val("Keep this note"); $("#mode").val("instant"); report();
      });
      report();
    });
  </script>
</body>
</html>

Au départ, seul Alpha est visible ; les deux panneaux restent dans le document.

visible=alpha
completed=0
busy=false
DOM panels=2

1. Avec No arguments, appuyez sur Toggle each : seul Beta est visible et completed reste zéro. Un second appel revient à Alpha.
2. Modifiez le champ Alpha, masquez-le puis affichez-le : sa valeur reste, ainsi que le retour à flex.
3. Avec 800ms, le résultat final est visible=beta, completed=2, busy=false. Le rappel s’exécute par panneau, pas une fois pour toute la collection.
4. Les clics répétés pendant l’effet sont ignorés ici, sans accumulation. Réinitialisez avant de comparer 200ms dans les mêmes conditions.
5. Show both affiche les deux ; Hide both masque les deux. Répéter conserve l’état imposé.
6. Reset termine les effets et restaure Alpha visible, Beta masqué, champ et mode initiaux. La valeur change à cause du .val() explicite, pas du masquage.

0ms ressemble visuellement à l’appel sans argument mais exécute complete par panneau, donc completed=2. Le mouvement réduit utilise ce chemin sans changer les réglages globaux du site. :visible pendant l’animation n’indique pas nécessairement l’état final ; vérifiez après achèvement.

Booléens et réinitialisation pendant un effet

Passez un vrai booléen pour définir l’affichage selon une condition. Deux true ne masquent pas de nouveau. Exécutez ceci dans la console de la même page ; deux éléments temporaires sont ensuite supprimés.

const $holder = $('<div><p>A</p><p>B</p></div>').appendTo("body");
const $items = $holder.find("p");
$items.toggle(false);
$items.toggle(false);
console.log(`hide twice visible=${$items.filter(":visible").length}`);
$items.toggle(true);
$items.toggle(true);
console.log(`show twice visible=${$items.filter(":visible").length}`);
console.log(`DOM count=${$items.length}`);
$holder.remove();

hide twice visible=0
show twice visible=2
DOM count=2

Imposer un état pendant l’animation nécessite de gérer file et état interne. settle() utilise .stop(true, true) pour vider la file et terminer l’effet courant, puis réinitialise busy et completed. Le second true peut lancer les rappels immédiatement : remettez les compteurs à zéro après stop.

Reset applique ensuite les états connus. Arrêter à une dimension intermédiaire diffère de terminer à destination. La vérification a couvert Reset pendant l’animation, suivi immédiatement d’un basculement sans argument : Alpha est correctement remplacé à l’écran par Beta. Pour une autre politique de clics, choisissez d’abord ignorer, attendre ou terminer l’effet courant.

Visibilité absente ou effet différent

Vérifiez sélecteur, .length et chargement de jQuery. Un ancêtre en display:none peut empêcher l’affichage du descendant malgré .toggle(true). Distinguez visibility:hidden et opacity:0. toggle ne supprime pas toutes les causes d’invisibilité.

Si l’effet termine immédiatement, contrôlez durée, mouvement réduit et version chargée. Choisissez selon le besoin : opacité seule, hauteur seule ou tailles combinées. Évitez de réécrire constamment les dimensions intermédiaires en styles permanents sans raison.

Pour masquer une zone contenant le focus, prévoyez réouverture et déplacement du focus. Les commandes de cet exemple restent dehors, mais il ne fournit pas toute la restauration de focus ou les annonces d’expansion. Le seul affichage ne constitue pas toutes les interactions.