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).
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.
é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>Code language: HTML, XML (xml)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>Code language: HTML, XML (xml)3. Voici maintenant le code HTML à placer dans votre page. Commençons par le lien :
<a id="toggler" href="#">Cliquez sur ce lien</a>Code language: HTML, XML (xml)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>Code language: HTML, XML (xml)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}Code language: CSS (css)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.
Envie d'ajouter des fonctionnalités exceptionnelles à votre site WordPress ou WooCommerce? Je suis là pour vous aider.
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
Salut Viktor,
Pour avoir juste l’effet de haut en bas, il faut remplacer
toggle()par la fonctionslideToggle().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.
Bonjour,
Il te faudra utiliser la fonction delay().
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?
Salut Marc,
Avec le code CSS :
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.
Salut Vik,
Jquery Script avec toggle en onmouseover
HTML
CSS
JS
C’est ce que tu recherches je pense.
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.
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
JQUERY
Je vous recommande la nouvelle méthode.
Je viens de tester le code que vous proposer mais personnellement il ne ce passe rien.
Bonjour,
Cela fonctionne bien chez moi. Vérifiez que vous avez bien chargé jQuery.
Autant pour moi, le jquery de mon serveur avait un soucis.
Merci encore pour votre script
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
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
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 ?
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.
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 !!
Bonjour,
Est-ce que le lien est indispensable ? On peut juste afficher le contenu en survolant le bloc : voir l’exemple sur JSFiddle.
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 !!
Bonjour,
Vous pourriez donner une classe à chaque bouton : toggler1, toggler2 etc. Ensuite, il suffit de rajouter des déclarations dans le code jQuery :
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
bonjour merci pour ce tuto je voudrais savoir comment enlever le trait bleu qui se trouve sous la phrase à cliquer ?
Bonjour,
Il suffit d’appliquer la propriété CSS underline sur les liens :
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!!!
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.
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
Bonjour,
Il faut cacher le bouton en lui ajoutant ce style CSS:
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
Salut Olivier,
Je viens d’écrire un nouvel article qui décrit comment effectuer un toggle avec des classes sur plusieurs blocs HTML.
Cela devrait aider.
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.
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.
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
Bonjour CK,
Il suffit d’ajouter cette ligne:
juste avant:
J’en ai profité pour rajouter ce code dans le troisième exemple de l’article jQuery : script toggle pour afficher et cacher de multiples blocs HTML.
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.
Bonjour,
Je suis désolé, je ne comprends pas votre question.
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
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
Je t’ai fait un petit exemple sur JSFiddle.
ok merci, je vais essayer ça !
Mise à jour du code : on retire
style="display:none"afin de gérer l’affichage lorsque JavaScript est désactivé.Bonjour. J’ai essayé ce tutoriel est ça marche. Vu que j’ai déjà eu à faire pour l’utilisation de JQuery grâce à des tutoriels en vidéo sur http://www.alphorm.com/tutoriel/formation-en-ligne-jquery, ça a été facile pour moi de l’assimiler. Merci pour ce partage.
Bonjour Samba,
Je t’en prie, je suis content que cela ait pu t’aider.
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
Bonjour LePenguin,
Tu peux utiliser la fonction siblings(), comme ici : http://jsfiddle.net/LHguJ/11/
ou encore la fonction nextAll(), comme ici : http://jsfiddle.net/swNLr/
Si tu as plusieurs blocs : script jQuery toggle pour afficher et cacher de multiples blocs HTML.
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
/* */
Bonjour Patrice,
Ton code a été mangé par le système de commentaires. Peux-tu le reposter sur un site comme http://codepen.io/pen/ ?
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 !
Mise à jour de l’article : une des boîtes de code était tronquée. Merci à la personne qui l’a signalé :)
Bonjour,
Je tiens à vous remercier pour cet enseignement pratique mais surtout design par sa simplicité!
Bonjour Mortala,
Je t’en prie, merci pour ton commentaire :)