Afficher ou Cacher des éléments HTML en utilisant jQuery

Description

Ce script jQuery vous donne la possibilité d'afficher ou de masquer facilement un div sur votre page Web. Il utilise la fonction toggle() intégrée à jQuery, qui a pour effet de faire apparaître ou disparaître un div en réponse à un clic sur un lien, une page ou tout autre élément du texte (selon celui que vous précédez). Pour résumer : si le div est masqué, cliquer sur le lien le rendra visible ; si le div est déjà visible, cliquer sur le lien le fera disparaître.

Comment utiliser ce code ?

1. Commencez par inclure la bibliothèque jQuery entre les balises <head> de votre page comme suit :

<script src="https://code.jquery.com/jquery-[dernière version jQuery].min.js"></script>

Vous trouverez les dernières versions de jQuery à cette adresse : https://releases.jquery.com/jquery/

2. Ensuite, insérez le code suivant dans le corps de votre page <body> :

//la ligne suivante dit à jQuery d'attendre que la page soit complétement chargée

$(document).ready(function() {

	//si un clic est identifié sur le lien, on emploi la function suivante

	$("a#lelien").click(function() {

		$("#madiv").toggle(500); // 500 représente le nombre de millisecondes (soit 0,5 seconde) pour afficher ou cacher la div

		return false; //comme c'est un lien href, on lui indique de ne rien retourner

	});

});

3. Placez un lien d'action à l'emplacement de votre choix. Voici un exemple :

<a href="#" id="lelien">Cliquez ici</a>

4. Enfin, ajoutez le contenu de la div que vous souhaitez contrôler :

<div id="madiv" style="display:none;"> <!-- Par défaut, la div est masquée avec display:none. Ainsi, si JavaScript n'est pas activé sur le navigateur du visiteur, la div restera cachée. -->

	Ici le contenu de la div.

</div>

Version "automatique"

Avec cette version, vous n'avez plus besoin d'utiliser les identifiants (#lelien et #madiv), mais uniquement une classe CSS sur un élément déclencheur. Par exemple :

<div class="ouvrirProchainElement">Cliquer ici pour afficher le prochain élément de cette div</div>

<!-- Vous créez ensuite l'élément suivant. Il est important de ne pas l'afficher par défaut avec un style "display:none". -->

<p style="display:none">Je suis l'élément qui suit la div "ouvrirProchainElement". Je peux être n'importe quel élément HTML, que ce soit une div, un paragraphe, un titre, un formulaire, etc.</p>

Intégrer le code jQuery dans l'emplacement souhaité sur votre page :

$(document).on("click",".ouvrirProchainElement",function(){

	$(this).next().toggle(500);

	return false;

});

Explications :

$(document) signifie "rechercher dans l'ensemble du document".
on() "sur" quel événement "click" à partir de quel élément ".ouvrirProchainElement" (dans cet exemple, une classe CSS, mais cela pourrait être un identifiant #ouvrirProchainElement ou un autre type de sélecteur).
$(this) fait référence à l'élément déclencheur du clic (ici, c'est ".ouvrirProchainElement").
next() permet de sélectionner le prochain élément HTML.
toggle() permet d'afficher ou de masquer l'élément suivant à partir de l'élément déclencheur.
return false empêche le déplacement de la page vers le haut si le lien contient un attribut href="#"."

J'espère que ce script gratuit vous est utile.
Pour soutenir mon travail, un simple don ou mettre une note est grandement apprécié.

Votre réussite en ligne commence ici

Vous cherchez à pousser encore plus loin vos idées ou à les concrétiser avec un site internet sur mesure ? Je suis là pour vous aider ! Mon expérience en développement web est à votre disposition.

Que ce soit la création de votre site web pro ou l'apport de fonctionnalités avancées à votre projet, contactez-moi pour en discuter et avoir un devis gratuit personnalisé.

Mon objectif est de vous offrir des solutions sur mesure qui répondent à vos besoins, et votre vision associée à mon expertise donnera vie à votre projet web parfait. Contactez-moi aujourd'hui, je réponds en général en moins d'une heure :

Demander un devis
Réponse rapide !

Commentaires

Ajouter un commentaire

Valerie77 le 13 Février 2022 à 19:42

Bonjour,
La nouvelle version "automatique" m'intéresse et fonctionne très bien en local mais lorsque j'envoie mes pages sur le serveur de mon hébergeur, le script ne fonctionne pas. Il ne se passe rien lorsque je clique sur un lien pour afficher la div correspondante. Avez-vous une idée d'où vient le problème ? Merci de votre aide.
Valérie

admin le 01 Mars 2022 à 14:38

Bonjour, il faut impérativement que l'élément à ouvrir soit juste après l'élément ayant la classe ".ouvrirProchainElement"

Regardez si votre console n'affiche pas d'erreur : Touche F12 > Console

Valerie77 le 03 Mars 2022 à 19:49

Merci pour votre réponse. Finalement j'ai abandonné car je ne trouvais pas pourquoi ça ne fonctionnait pas. De plus ça m'obligeait à revoir mon code html et css donc j'ai repris mon code précédent. Il me semblait pourtant que tout était bon. Je verrai peut-être quand j'aurai plus de temps libre. Merci en tout cas.
Valérie

admin le 03 Mars 2022 à 19:51

Désolé de pas vous avoir répondu plus tôt, bonne continuation.

Valerie77 le 04 Mars 2022 à 10:26

Bonjour, ne le soyez pas. Vous avez pris sur votre temps pour me répondre. D'autres ne répondent jamais à nos questions, même pour des tutos payés. Bonne fin de semaine :-)
Valérie

admin le 04 Mars 2022 à 10:26

Merci !

Retour à la liste des scripts