jQuery : script utilisant la fonction toggle pour afficher ou cacher un bloc HTML

jquery

Il y a quelques mois, je me suis amusé à transformer mon script javascript maison qui me permet d’afficher certaines zones de textes sur le site, notamment dans les articles de la catégorie Music/Séries.

Étant donné que jQuery est présent sur toutes les pages du site, j’ai adapté le script pour qu’il utilise jQuery. Cela fera aussi une librairie maison de moins à maintenir (et à charger).

Important : si vous voulez gérer plusieurs blocs, utilisez le script JQuery toggle pour afficher et cacher de multiples blocs HTML

Un script Javascript répondant à des besoins précis

J’écris pas mal de code afin de répondre à mes besoins sur le site, le but étant de me simplifier la vie au maximum.

Dans certains articles, il existe des zones de textes qui ne sont pas tout public et qui nécessitent une authentification préalable à leur lecture. La zone de texte doit apparaître lorsque l’on clique sur un des liens présents dans l’article.

Démo

Pour voir ce script en action, il suffit de cliquer sur ce lien.

Ce texte apparaît et disparaît grâce à un script javascript
écrit pour jQuery et qui utilise la fonction toggle().

Le script

1. Commencez par inclure jQuery dans l’entête de votre page (head) – comme ceci:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>

2. Ensuite, il ne vous reste plus qu’à inclure le script dans le corps de votre page (body) :

<script>
/* <![CDATA[ */ 
/*
|-----------------------------------------------------------------------
|  jQuery Toggle Script by Matt - skyminds.net
|-----------------------------------------------------------------------
|
| Affiche/cache le contenu d'un bloc une fois qu'un lien est cliqué.
|
*/

// On attend que la page soit chargée 
jQuery(document).ready(function()
{
   // On cache la zone de texte
   jQuery('#toggle').hide();
   // toggle() lorsque le lien avec l'ID #toggler est cliqué
   jQuery('a#toggler').click(function()
  {
      jQuery('#toggle').toggle(400);
      return false;
   });
});
/* ]]> */ 
</script>

3. Voici maintenant le code HTML à placer dans votre page. Commençons par le lien :

<a id="toggler" href="#">Cliquez sur ce lien</a>

4. On enchaîne avec la zone de texte :

<div id="toggle">Ce texte apparaît grâce à un script javascript écrit pour jQuery et utilise la fonction toggle().</div>

5. Il ne vous reste plus qu’à ajouter une ligne de CSS pour styliser l’ID #toggle :

#toggle{height:auto; background:#eee; border:1px solid #900; margin:1em;text-align:center}
#toggle p{text-align:center;padding:0}

Explications

Le script en lui-même est toujours aussi simple : le contenu du bloc est caché par défaut au chargement de la page.

Lorsque le visiteur clique sur le lien, le contenu est affiché avec un petit effet coulissant.

Simple et efficace.

Important : si vous voulez gérer plusieurs blocs, utilisez le script jQuery toggle pour afficher et cacher de multiples blocs HTML

Envie d'ajouter des fonctionnalités exceptionnelles à votre site WordPress ou WooCommerce? Je suis là pour vous aider.

Explorons les possibilités ensemble »

Articles conseillés :

51 pensées sur “jQuery : script utilisant la fonction toggle pour afficher ou cacher un bloc HTML”

  1. Bonjour Matt,

    Et merci avant tout pour cet article super accessible sur le toggle.

    J’ai néanmoins une question pour personnaliser l’utilisation de ce Toggle. Comment faut-il faire pour que la zone de texte se déroule non pas depuis le point haut gauche mais depuis une “barre verticale. En d’autres mots, une apparition uniquement de haut en bas?

    Merci beaucoup de ta réponse!

    Viktor

    Reply
      • Bonjour!!!
        Voici le lien d’un nouveau réseau social gloxwell.com
        Je veux avoir vos critiques parce que ce grâce a vos jQuery que nous avons arrive a finir ce réseau social. Enfin Mr. Matt je voulais savoir comment afficher un div après 3 minutes avec jquery merci d’avoir repondre a ma question et de faire partie de membre du gloxwell.

  2. bonjour,
    question de bleu mais comment s’assurer que le texte au dessous se décale bien vers le bas quand le texte apparait et vers le haut quand il disparait?

    Reply
  3. Bonjour Matt,

    Et merci beaucoup de ta réponse, c’est parfaitement ce qu’il me faut!

    J’ai un tout petit peu modifié la fonction pour qu’elle réagisse au mouseover et non pas au click. Juste une petite précision à ce sujet : quel code faut-il mettre sur les autres boutons (liens) pour qu’un mouseover sur ces liens entraîne la fermeture de la boîte déroulée par le toggle présent sur un lien?
    De même manière, avec la fonction mouseover, est-il possible que la boîte se retracte lorsque la souris quitte le bouton (pour le moment, il faut quitter et repasser dessus pour qu’elle se referme)?

    Merci beaucoup de ton aide et de ta réactivité!

    Très bonne journée.

    Reply
    • Salut Vik,

      Jquery Script avec toggle en onmouseover

      HTML

      passez votre souris ici

      show

      CSS

      .desc {display:none}

      JS

      $(document).ready(function() {
          $(".body").hover(function () {
              $(".desc").toggle();
          })
      })

      C’est ce que tu recherches je pense.

      Reply
  4. Bonjour,

    Tout d’abord merci beaucoup pour cette fonction, elle est parfaite pour ce que je veux faire !

    Mais le problème, c’est que lorsque je répète l’opération pour un autre bloc de texte, ça me renvoie toujours à la première description…

    Je m’explique :

    TITRE TEXTE 1

    Je clique, j’ai :

    TITRE TEXTE 1
    
    ----- Texte du titre 1, blabla

    Et lorsque j’utilise la fonction pour une autre “description caché” (que je veux faire), j’obtiens ceci :

    TITRE TEXTE 1
    
    TITRE TEXTE 2
    
    ---- Texte du titre 1 (et qui s'affiche dans le "Titre texte 1")

    Je ne sais pas si j’explique bien, mais en gros je n’arrive pas a répéter l’opération de la fonction ailleurs que pour UNE seule description.

    Comment faire pour avoir plusieurs textes “cachés” ?

    Par avance, merci.

    Cordialement.

    Reply
    • Bonjour Debutant,

      Il faut remplacer les ID par des CLASS dans le code comme dans l’article JQuery : script toggle pour afficher et cacher de multiples blocs HTML.

      Ancienne méthode:

      HTML

      Cliquez sur ce premier lien.
      
      
      
      Maintenant, cliquez sur ce deuxième lien.
      
      

      JQUERY

      
      

      Je vous recommande la nouvelle méthode.

      Reply
      • Bonjour,

        Je réussis bien à afficher un texte caché en suivant les codes proposés dans l’article initial.

        Je ne parviens en revanche pas à afficher de texte caché en modifiant le html et le script tel que proposé ci-dessus.

        Je ne comprends pas pourquoi ça ne marche pas étant donné que ça marche pour 1 toggle et que j’ai bien reporté les modifications.

        Adresse de mon “one page site” sur lequel je teste :
        vmarce.phpnet.org/payfair/meilleur

        Merci pour votre aide !

      • Bonjour,
        désolé de relancer ce sujet mais j’ai un problème.

        mon Toggler est une image et j’ai trois images sur une ligne. Le problème c’est que quand je place le Toggle après le premier Toggler et que l’on clique dessus tout se décale (ce que je ne veux pas puisse que je veux que ce qui apparaissent, arrive en dessous de ma ligne d’image). Pour remédier à cela, j’ai placé le toggle après les trois images mais du coup, le coup du changement de id en class ne marche plus.

        Comment faire pour que les toggle ne se marche pas dessus et qu’ils apparaissent en dessous de la ligne d’images?
        Une idée?

        J’espère que j’ai été clair.
        Merci d’avance pour votre aide

  5. Bonjour
    Tout fonctionne bien pour moi sauf que le bloc s’affiche avec un surplus de lignes blanches en dessous, lignes qui disparaissent très vite ensuite… que se passe-t-il ?
    On dirait qu’il découvre plus de ligne qu’il n’y en a vraiment …
    Comment résoudre ce pb qui apparaît principalement avec IE

    Merci

    Reply
    • pour info, le phénomène se produit lors que la partie que l’on dévoile est constituée d’une table avec des cellules dont la largeur est en %age… mais si la largeur des cellules est en px on n’a pas le phénomène …
      c’est louche non ?

      Reply
    • Bonjour,

      IE a des comportements erratiques, avez-vous utilisé un autre navigateur pour tester?

      Tout dépend de ce que vous voulez afficher mais il pourrait être intéressant de remplacer le tableau par une liste stylisée en CSS.

      Reply
  6. Comment appliquer le hover sur le bloc et sur le lien pour que le bloc reste affiché au survol de la souris.Dès lors que l’un des deux élément n’est plus survolé par la souris que le bloc se remette en position masqué.
    -On survol le lien
    -Le bloc s’affiche
    -Le bloc reste affiché lorsque la souris ne survol plus le lien mais uniquement le bloc
    -Le bloc se dissimule quand il n’est plus survolé
    Ou plus simplement le bloc remplace le lien car le hover fonctionne que sur le lien ce qui est toute a fait légitime avec le code JQuery:$(‘#lienmh’).hover(function().
    Merci d’avance pour votre aide !!

    Reply
  7. Bonjour Matt,

    Ce script est super!!

    J’ai quant à moi un petit soucis je ne sais pas si ma demande est possible.

    En fait au lieu d’afficher du texte quand on clique, pour ma part, j’affiche des images.
    Mais celles-ci doivent se superposer.
    En gros j’ai 4 boutons et un schéma divisé en 4 parties, le milieu du schéma est une image fixe(un background) et par les clics sur les 4 boutons on complète le schéma petit à petit.
    Je ne sais pas si je suis claire mais je rêverai d’une réponse ! :)
    Si vous pouvez m’aider s’il vous plait ?

    Merci par avance !!

    Reply
    • Bonjour,

      Vous pourriez donner une classe à chaque bouton : toggler1, toggler2 etc. Ensuite, il suffit de rajouter des déclarations dans le code jQuery :

      // on cache les blocs
      jQuery('#toggle').hide();
      jQuery('#toggle1').hide();
      
      // on affiche
      jQuery('a#toggler').click(function()
        {
            jQuery('#toggle').toggle(400);
            return false;
         });
      jQuery('a#toggler1').click(function()
        {
            jQuery('#toggle1').toggle(400);
            return false;
         });
      Reply
  8. Bonjour je me suis inspiré de votre tuto pour faire apparaitre une partie d’un site via .fadeToggle(), cela fonctionne très bien mais une fois la partie affichée (show) les ancres (liées au menu) des parties en dessous de celle-ci sont toutes décalées.

    C’est à dire qu’une fois sur la balise suivante :

    Services

    c’est celle du dessous qui est active dans le menu :/

    Avez-vous une solution?
    Merci d’avance

    Reply
  9. bonjour merci pour ce tuto je voudrais savoir comment enlever le trait bleu qui se trouve sous la phrase à cliquer ?

    Reply
    • Bonjour,

      Il suffit d’appliquer la propriété CSS underline sur les liens :

      #toggler a:link {text-decoration:none;}
      #toggler a:visited {text-decoration:none;}
      #toggler a:hover {text-decoration:underline;}
      #toggler a:active {text-decoration:underline;}
      Reply
  10. bonjour,

    merci pour ce tutoriel! ça tombe pile poil avec se que souhaite faire!! ça fonctionne très bien pour un élément.
    Par contre, je rencontre un problème : je voudrais répéter l’action sur chaque élément d’un menu déroulant.
    J’ai remplacé les ID par des CLASS mais ça ne fonctionne pas….

    Au secours please!!!

    Reply
    • Salut Guil,

      Je viens de tester avec plusieurs blocs en classes et cela fonctionne. Je ne suis pas certain que ce soit très adapté à un menu par contre.

      Reply
  11. salut a tous j essaye de cachez un bouton mais impossible je voudrais qu il apparaisse quand on clic sur un lien qui s’ouvre sur une nouvelle page est ce possible je voudrais cachez un bouton du style submit merci de m’aidez

    Reply
  12. bonjour et merci pour ce script car je le trouves bien pour l’utilisation qu’il va m apporter mais j’ai un soucis. c’est vrai que la solution es apporté ds les autres commentaire mais j arrive pas a la mettre en application. ce que je veux réalisé c’est que je veux répéter l’opération de cette fonction toge ailleurs que pour UNE seule description. Je vois qu il faut mettre des class au lieu des id et que c’est expliqué mais j’essaye votre explicationet je n’y arrive bien et le script est bien chargé également

    Reply
  13. Bonjour,

    J’ai testé votre code car j’en ai besoin dans le cadre du rafraichissement d’un vieux site internet.
    Il fonctionne lorsque je suis dans l’éditeur sans problème, y compris lorsque je lance un aperçu.
    Cependant dés que je sauvegarde et retourne sur la page il n’y a plus rien d’afficher, on retrouve bien pourtant les lignes de codes dans le code source mais avec des mentions “désolé pas de script” qui ont remplacé toutes les balises … Avez vous une explication ? Le site internet ne supporte peut être pas cela ?
    Existe t-il une solution alternative sans utiliser ce type de code ?
    Merci d’avance.
    Cordialement.

    Reply
    • Bonjour,

      Cela ressemble fort à un éditeur qui supprime les scripts pour éviter l’injection de code javascript dans les pages. Autre solution : copier le code javascript dans un fichier .js et le code CSS dans la feuille de style.

      Reply
  14. Bonjour,
    J’ai utilisé votre code pour créer une FAQ. Je vous remercie ça marche super.
    Par contre, j’aimerais savoir comment faire pour qu’une question ouverte se ferme automatiquement si on clique sur une autre question ?
    Merci beaucoup
    Cordialement

    Reply
  15. Bonjour,

    Merci pour le tutoriel.
    Lorsque je clique sur lien, la div toggle apparait et les div en dessous laisse la place pendant l’ animation mais dés que celle-ci est finit toutes les div en dessous reviennent à leur place. Il n’ y a que le texte qui reste par dessus les div du dessous). Et lorsque j’ appuie sur le lien la div toggle revient le temps de l’ animation et repart.

    Reply
  16. Hello Math!

    Merci pour ce tuto, ça m’a bien aidé !

    J’aimerais cependant utiliser l’option Flip (j’ai pris le code tout en bas de la page http://api.jquery.com/toggle/) car j’ai un soucis d’affichage de tableau avec la méthode Toggle simple.

    Ca marche super bien, sauf que je trouve un peu burt l’apparition direct. Je préfèrerai que ça s’affiche doucement et partent doucement aussi comme un fadeIn.

    Est-ce que c’est possible tu crois ? Donc en gros, un Toggle Flip avec un fadeIn/fadeOut.

    Merci

    Reply
    • Bonjour Jérémie,

      Il me semble que ce n’est pas possible avec la fonction flip puisque c’est comme si tu retournais une carte ou une pièce de monnaie : c’est soit pile, soit face mais tu ne peux pas gérer la vitesse.

      Je pense que ce qu’il te faut c’est un petit

      fadeToggle( "slow", "linear" );

      Je t’ai fait un petit exemple sur JSFiddle.

      Reply
  17. Bonjour,

    Merci pour ce petit tutoriel.

    Existe-il une solution équivalente pour fermer qu’une seul div ? sur ma page j’ai plusieurs menu, lorsque je clique sur la flèche ayant pour id #drop j’aimerais fermer seulement le menu associé…

    Merci

    Reply
  18. bonjour, je n’arrive pas à faire ce qui est écrit au dessus quand je mets le code à l’endroit indiqué, ça ne fonctionne pas

    je mets mon code.
    Si vous avez une idée merci d’avance

    /* */

    Reply
  19. Bonjour, super tuto ! J’ai juste un petit soucis :
    quand je fais la manoeuvre pour un bloc, cela fonctionne. Mais lorsque je fais la même chose pour un autre bloc se publiera sur la même page de mon site, alors ça ne va plus (en voulant dérouler le deuxième bloc, je déroule en fait le premier). J’ai pourtant regardé votre article pour afficher/cacher plusieurs blocs mais ça me semble différent et en plus ce n’est pas un “Lire la suite” qu’il me faut. Si vous avez une solution, merci d’avance !

    Reply
  20. Bonjour,

    Je tiens à vous remercier pour cet enseignement pratique mais surtout design par sa simplicité!

    Reply

Opinions