Vous avez trouvé un extrait jQuery prêt à l’emploi pour un bouton «Afficher/Masquer» qui ne fonctionne pas? Un code utilisant .toggle() a été écrit en suivant un manuel vieux de dix ans et a cessé de fonctionner silencieusement depuis jQuery 1.9. Pour un débutant, cette situation ressemble à de la magie noire: la console est vide, aucune erreur, le bouton ne répond tout simplement pas au deuxième clic.

Le problème, c’est que la méthode .toggle() dans jQuery a eu deux vies. La première, qui anime l’affichage/le masquage des éléments, est toujours vivante. La seconde, qui alternait des actions au clic, a été supprimée en 2013, mais les moteurs de recherche continuent de faire remonter d’anciens articles en tête des résultats. Nous allons vous expliquer ici pourquoi l’ancien code est mort et écrire trois alternatives fonctionnelles, d’un simple indicateur jusqu’aux attributs de données pour une dizaine de boutons à la fois.

💡 Aperçu rapide:

• Pourquoi votre .toggle(fn1, fn2) ne fonctionne pas et où chercher le code obsolète
• Méthode 1: une variable d’état pour un seul bouton avec un minimum de code
• Méthode 2: .data() quand vous avez de nombreux boutons et que chacun vit sa propre vie
• Bonus: trois actions ou plus dans une chaîne de clics en utilisant un compteur
• Le .toggle() moderne pour l’animation, ce qui reste et comment l’utiliser

Qu’est-ce que.toggle() dans jQuery et pourquoi l’ancien code est mort

Avant jQuery 1.8, la méthode .toggle() pouvait faire deux choses différentes selon les arguments passés. Si vous passiez deux paramètres de type fonction, elle fonctionnait comme un alternateur: le premier clic exécutait la première fonction, le deuxième clic exécutait la seconde, le troisième clic exécutait à nouveau la première, et ainsi de suite en cycle.

Cela semblait compact:

1
// Worked in jQuery before 1.8, removed in 1.9
2
$('#myButton').toggle(
3
  function() {
4
    $(this).text('Show categories').css('background', 'green');
5
  },
6
  function() {
7
    $(this).text('Hide categories').css('background', 'red');
8
  }
9
);

C’est exactement ce code qui circule encore aujourd’hui dans les blogs francophones. Le problème, c’est qu’avec la sortie de jQuery 1.9 (janvier 2013), cette forme de .toggle() a été complètement supprimée. La raison: la double finalité de la méthode créait de la confusion, et les débutants ne comprenaient pas pourquoi .toggle() animait parfois et alternait des actions à d’autres moments.

Aujourd’hui, .toggle() ne fait qu’une seule chose: afficher ou masquer un élément avec une animation. Pour alterner des actions, le développeur doit gérer l’état explicitement.

Méthode 1: variable d’état

L’approche la plus directe consiste à créer une variable booléenne et à l’inverser dans le gestionnaire .click(). Elle convient pour un seul bouton ou des éléments partageant la même logique d’alternance.

Ajoutez le code à votre fichier de scripts du thème (via wp_enqueue_script dans functions.php) ou dans un bloc <script> avant la fermeture de </body>:

1
let isFirstClick = true;
2
 
3
$('#toggleBtn').on('click', function() {
4
  const $btn = $(this);
5
 
6
  if (isFirstClick) {
7
    $btn.text('Hide categories');
8
    $('#contentBlock').show(700);
9
    isFirstClick = false;
10
  } else {
11
    $btn.text('Show categories');
12
    $('#contentBlock').fadeOut('slow');
13
    isFirstClick = true;
14
  }
15
});

Ici, isFirstClick stocke l’état actuel en dehors du gestionnaire. Le premier clic affiche le bloc et passe l’indicateur à false, le deuxième le masque et remet l’indicateur à true. Aucune magie: vous savez exactement quelle action va se produire maintenant et laquelle se produira ensuite.

L’avantage de cette approche est que l’indicateur peut être réinitialisé depuis n’importe où dans le programme. Par exemple, après une requête AJAX, si vous voulez remettre le bouton dans son état initial, utilisez simplement isFirstClick = true.

L’inconvénient est une variable pour tous les boutons. Si la page comporte deux alternateurs indépendants avec la classe .toggleBtn, la variable isFirstClick sera partagée par les deux. Pour un tel scénario, utilisez la méthode 2.

Méthode 2: attributs de données jQuery

Lorsque vous avez plusieurs boutons indépendants (par exemple, chaque produit d’un catalogue a son propre bloc de spécifications), vous devez stocker l’état directement sur l’élément DOM. La méthode .data() attache des données arbitraires à un élément sans polluer la portée globale.

Chargez le script de la même manière, via wp_enqueue_script ou dans le pied de page:

1
$('.toggle-btn').on('click', function() {
2
  const $btn = $(this);
3
  const hasClicked = $btn.data('clicked') || false;
4
 
5
  if (!hasClicked) {
6
    $btn.text('Hide specifications').css('background', '#f0f0f0');
7
    $btn.next('.specs-block').show(400);
8
    $btn.data('clicked', true);
9
  } else {
10
    $btn.text('Show specifications').css('background', '#fff');
11
    $btn.next('.specs-block').fadeOut(300);
12
    $btn.data('clicked', false);
13
  }
14
});

L’appel $btn.data('clicked') lit l’état de ce bouton spécifique. Dix boutons sur la page signifient dix états isolés. Aucun conflit.

Remarque: .data() fonctionne avec la mémoire de jQuery, pas avec les attributs HTML data-*. Si vous avez besoin que l’état survive à un rechargement de page, écrivez en plus $btn.attr('data-clicked', 'true') et lisez via .attr().

Bonus: trois actions ou plus dans une chaîne

Que faire s’il ne doit pas y avoir deux mais trois clics? Par exemple: le premier appui affiche le bloc, le deuxième modifie son contenu, le troisième le masque. Ici, au lieu d’un indicateur booléen, vous créez un compteur numérique:

1
$('#multiBtn').on('click', function() {
2
  const $btn = $(this);
3
  let count = $btn.data('clickCount') || 0;
4
 
5
  switch (count) {
6
    case 0:
7
      $btn.text('Step 1: show block');
8
      $('#targetBlock').show(500);
9
      break;
10
    case 1:
11
      $btn.text('Step 2: load data');
12
      $('#targetBlock').load('/ajax-content');
13
      break;
14
    case 2:
15
      $btn.text('Step 3: hide');
16
      $('#targetBlock').fadeOut(400);
17
      count = -1; // next click will become case 0 again
18
      break;
19
  }
20
 
21
  $btn.data('clickCount', count + 1);
22
});

Réinitialiser le compteur (count = -1) a du sens si la chaîne doit boucler. Si l’action est unique, supprimez simplement la réinitialisation, et rien ne se passera après le troisième clic.

Le.toggle() moderne pour l’animation

La forme de .toggle() qui a survécu est strictement responsable de la visibilité des éléments. Sans arguments, c’est un basculement instantané. Avec une durée, elle anime simultanément la largeur, la hauteur et l’opacité.

Scénario de base: un bouton «Afficher/Masquer le menu»:

1
$('#menuToggle').on('click', function() {
2
  $('#mainMenu').toggle('slow', function() {
3
    // callback after animation completes
4
    console.log('Animation complete');
5
  });
6
});

Les chaînes 'fast' et 'slow' donnent respectivement 200 et 600 millisecondes. Vous pouvez passer un nombre exact: .toggle(400) signifie 400 ms.

Une astuce utile: forcer l’état via un paramètre booléen. .toggle(true) affiche toujours l’élément, et .toggle(false) le masque toujours. C’est pratique en combinaison avec un indicateur externe de la méthode 1:

1
let visible = true;
2
$('#toggleBtn').on('click', function() {
3
  visible = !visible;
4
  $('#content').toggle(visible);
5
});

Le code se lit de manière linéaire: l’indicateur est inversé, l’élément prend l’état requis. Pas de if/else conditionnel autour de la visibilité.

⁉️🤔 Foire aux questions

Pourquoi mon ancien code avec .toggle(fn1, fn2) n’affiche-t-il aucune erreur dans la console?

L’ancienne forme de .toggle() a été supprimée au niveau de la méthode: jQuery ne trouve tout simplement pas une telle signature et ne fait rien silencieusement. La console est vide parce qu’appeler .toggle(fn1, fn2) pour jQuery moderne est un appel syntaxiquement correct mais sans effet (les arguments sont ignorés). Vérifiez votre version de jQuery: si elle est 1.9 ou supérieure, l’ancien code est mort.

Puis-je inclure jQuery Migrate et ne pas réécrire le code?

Techniquement, oui. Le plugin jQuery Migrate restaure les méthodes supprimées, y compris l’ancien .toggle(). Mais c’est une béquille temporaire: Migrate ajoute environ 10 Ko minifiés et est conçu pour une période de transition, pas pour une utilisation permanente. Si le site tourne sous WordPress et que jQuery est chargé depuis le cœur, Migrate est déjà présent pour la rétrocompatibilité. Mais s’appuyer dessus dans votre propre code n’est pas recommandé: il peut être désactivé à tout moment par une mise à jour de thème ou de plugin.

Qu’est-ce qui est mieux, une variable ou un attribut de données?

Pour un seul bouton, utilisez une variable (moins de code). Pour plusieurs boutons indépendants ou des éléments ajoutés dynamiquement, utilisez .data() (isolation de l’état). Si les boutons sont ajoutés via AJAX après le chargement de la page, utilisez la délégation: $(document).on('click', '.toggle-btn', function() { ... }).

Est-ce que.toggle() fonctionne sur les appareils mobiles?

Oui. Le .toggle() moderne (animation) et tous les gestionnaires de clic de cet article fonctionnent correctement avec les événements tactiles. jQuery normalise click pour les navigateurs mobiles depuis ses premières versions. La seule nuance: sur iOS avant la version 12, les éléments sans cursor: pointer avaient un clic retardé, mais ce problème est résolu avec une ligne CSS touch-action: manipulation pour le bouton.

Où dois-je placer le code jQuery dans WordPress?

Trois options. Rapide: le plugin Code Snippets: insérez le code JS dans un snippet de type «JavaScript», et il se charge automatiquement dans le pied de page. Correcte: créez un fichier js/toggle.js dans votre thème enfant, enregistrez-le via wp_enqueue_script('my-toggle', get_stylesheet_directory_uri() . '/js/toggle.js', array('jquery'), '1.0', true) dans functions.php. Le paramètre true à la fin envoie le script dans le pied de page, ce qui est la norme pour le code qui travaille avec le DOM. Ne mettez pas de <script> directement dans le corps de l’article; l’éditeur WordPress supprimera la balise.

Quelle approche choisir pour votre projet

Si vous avez un bouton avec un texte qui alterne et la visibilité d’un bloc, utilisez une variable d’état. Trois lignes, un comportement transparent, un débogage trivial.

S’il y a plusieurs alternateurs (catalogue, panneau de paramètres, liste d’éléments extensibles), utilisez uniquement .data(). Une variable globale pour plusieurs boutons créera une situation de concurrence d’état que vous déboguerez plus longtemps qu’il ne faut pour écrire le code avec la méthode 2.

Une chaîne de trois étapes ou plus nécessite un compteur avec switch. Ne compliquez pas avec des indicateurs booléens ce qui s’exprime naturellement avec des nombres.

Plus important encore, si vous trouvez un article dans les résultats de recherche avec .toggle(fn1, fn2), fermez l’onglet. jQuery est vivant, mais cette méthode spécifique a été enterrée en 2013.

Vous pouvez rafraîchir vos connaissances sur l’exécution d’extraits JavaScript à la volée dans notre article sur le travail avec les snippets dans Chrome DevTools, qui vous sera utile pour tester rapidement le code de cet article.