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

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.

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.

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


Écrire un commentaire

34 Commentaires à "jQuery : script utilisant la fonction toggle pour afficher/cacher un bloc HTML"


Invité
J889
16 March 2015

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.

Invité
12 March 2015

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

Invité
Kevin
28 January 2015

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.

Invité
olivier
29 December 2014

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

Membre
ALAIN
5 September 2014

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

Invité
Guil
30 August 2014

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!!!

Invité
thibault
27 April 2014

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

Invité
Andy
8 January 2014

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

Invité
amandine
29 December 2013

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 !!

Invité
Stan
11 November 2013

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 !!

Invité
Stan
23 November 2013

?

Invité
Freddy
7 November 2013

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

Invité
Freddy
8 November 2013

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 ?

Invité
Debutant
13 October 2013

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.

Invité
Vik
27 August 2013

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.

Invité
Marc
27 August 2013

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?

Invité
Vik
24 August 2013

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