Afficher cacher div jQuery

Description

Une nouvelle version automatique en bas de l'article! 17/03/2020

Code jQuery permettant d'afficher ou de cacher une div sur votre page.

Ce script utilise tout simplement la fonction toggle() de jQuery, déjà toute créée, qui a pour effet d'afficher ou de cacher une div, en cliquant sur un lien, une div, du texte (Que vous aurez préalablement définit comme étant le précurseur de cet effet).

En résumé:
Si la div est cachée => vous cliquez sur le lien et la div s'affichera
Au contraire, si la div est affichée => vous cliquez sur le lien et la disparaitra.

Comment utiliser ce code ?

1. Tout d'abord, vous devez inclure la librairie de jQuery, entre les balises <head>, de votre page, comme ceci:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Lien vers toutes les versions de jQuery où vous pourrez prendre la dernière version et choisir en minifié ou non: https://code.jquery.com/jquery/

2. Ensuite, le code qui sera inclus 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 est le nombre de millisecondes (soit 0.5 secondes) pour afficher ou cacher la div

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

	});

});

3. Placez votre lien d'action, là où vous le souhaitez:

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

4. Le contenu de la div:

<div id="madiv" style="display:none;"> <!-- par défaut, on cache la div avec display none, comme ça si JavaScript n'est pas activé sur le navigateur du visiteur, elle sera quand même cachée -->

	Ici le contenu de la div.

</div>

Nouvelle version "automatique"

Avec cette version, pas besoin de mettre #lelien ou #madiv mais seulement une classe CSS sur un élément qu'il faudra cliquer pour ensuite révéler l'élément suivant dans la page, exemple:

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

<!-- on crée le prochain élément, chose importante, il faut de base ne pas l'afficher avec display:none -->

<p style="display:none">Je suis l'élément qui suit la div "ouvrirProchainElement", je peut être n'importe quel élément HTML, div, p, h1, form, etc..</p>

Vous devrez placer le code jQuery là où vous voulez dans votre page:

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

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

	return false;

});

Explications:

$(document) sert à dire "regarder dans tout le "document"
on() "on" signifie "sur", sur quoi ? l'événement "click", sur quel élément ? ".ouvrirProchainElement" (ici, une classe CSS mais peut aussi être un id #ouvrirProchainElement ou une autre type de sélecteur)
$(this) pour l'élément cliqué (ici c'est ".ouvrirProchainElement")
next() pour le prochain élément HTML
toggle() pour developper ou envelopper, le prochain élément de this
return false pour ne pas faire monter la page en haut si c'est un lien href="#"

Besoin de travaux pour votre site ?

Je suis disponible, contactez-moi !

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