Dicton du 15 Novembre:
En novembre fou engendre, en août gît sa femme.

Télécharger
Noter:

Afficher cacher div jQuery

Description

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:

Code source (HTML)

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

Lien de la librairie jQuery: https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js

2. Ensuite, le code qui sera inclus dans le corps de votre page <body>:

Code source (JavaScript)

<script>
//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
});
});
</script>


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

Code source (HTML)

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


4. Le contenu de la div:

Code source (HTML)

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


Voila, vous pouvez styliser la div et le lien si vous le souhaitez.

Commentaires

Pas encore de commentaire ajouté, soyez le premier!

Ajouter un commentaire

Pseudo/Nom *
Email *
Message *
La balise [code]Votre code...[/code] peut être utilisée


ATTENTION! Ce formulaire est exclusivement réservé aux commentaires
Pour toutes demandes d'aide, veuillez ajouter votre demande sur le forum svp

Captcha * 6 × sept =

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

Retour à la liste des scripts

Flag Counter