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 là pour vous aider !

Commentaires

Ajouter un commentaire

Les champs marqués d'un * sont obligatoires.

Pas encore de commentaire, soyez le premier!

Retour à la liste des scripts