JQuery : script utilisant la fonction toggle pour afficher/cacher un bloc HTML

jquery JQuery : script utilisant la fonction toggle pour afficher/cacher un bloc HTMLIl 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 Anime/Série.

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

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.

Le script

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

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

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

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

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

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.


22 commentaires

  1. Vik a écrit :
    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

  2. Marc a écrit :
    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?

  3. Vik a écrit :
    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.

    • Matt a écrit :
      3.1

      Salut Vik,

      Jquery Script avec toggle en onmouseover

      HTML

      CSS

      JS

      C’est ce que tu recherches je pense.

  4. Debutant a écrit :
    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 :

    Je clique, j’ai :

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

    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.

    • Matt a écrit :
      4.1

      Bonjour Debutant,

      Il faut remplacer les ID par des CLASS dans le code.

      JQuery Toggle Script avec plusieurs blocs

      HTML

      JQUERY

  5. Freddy a écrit :
    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

    • Freddy a écrit :
      5.1

      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 ?

    • Matt a écrit :
      5.2

      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.

  6. Stan a écrit :
    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 !!

  7. amandine a écrit :
    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 !!

    • Matt a écrit :
      7.1

      Bonjour,

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

  8. Andy a écrit :
    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 :

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

    Avez-vous une solution?
    Merci d’avance

  9. thibault a écrit :
    9

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

    • Matt a écrit :
      9.1

      Bonjour,

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

  10. Guil a écrit :
    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!!!

quick-menu

Laisser un commentaire


Si vous possédez un compte, connectez-vous.

Me tenir informé(e) des futurs commentaires.