div ou n’importe quel autre texte ou élément HTML en utilisant du JavaScript et sans utiliser la librairie jQuery.
L’idée ne va être simplement de masquer un élément mais de laisser l’opportunité aux visiteurs de cacher ou d’afficher les div en cliquant sur certains éléments ou en passant leur souris à certains endroits.
Pour faire cela, nous allons jouer sur l’état de la propriété CSS display de l’élément HTML qu’on souhaite afficher ou masquer.
Afficher ou cacher un div, un texte, ou n’importe quel élément HTML en CSS
Il existe principalement deux méthodes pour cacher un élément HTML visible en CSS : on peut soit régler la valeur de la propriété visibility de l’élément sur visibility: hidden, soit régler son type d’affichage sur display: none.
Il existe cependant une différence de taille entre ces deux méthodes : appliquer un visibility: hidden sur un élément comme un div par exemple va simplement cacher cet élément mais ne va pas le retirer du flux de la page ce qui signifie que l’espace qu’il occupait lorsqu’il était visible va être conservé tandis qu’appliquer un display: none va non seulement masquer l’élément en question mais va en plus permettre aux autres éléments d’occuper l’espace de l’élément caché.
N’hésitez pas à aller lire mon article sur les différences entre visibility: hidden et display: none pour bien les comprendre.
Afficher ou cacher un div lors d’un clic
On veut que nos utilisateurs puissent cacher notre div lorsqu’il est affiché ou au contraire l’afficher lorsqu’il est caché en cliquant simplement sur un bouton.
Pour faire cela, on va utiliser l’évènement JavaScript click. Lors du clic sur le bouton, on va récupérer la valeur de la propriété display du div et la modifier : si la valeur est display: none, on la change en display: block et inversement.
Pour répondre à l’évènement click en JavaScript, on peut soit utiliser la méthode addEventListener() qui permet d’enregistrer une fonction qui sera appelée lors du déclenchement d’un évènement choisi, soit simplement utiliser la propriété onclick qui représente le gestionnaire d’évènement pour l’évènement click de l’élément courant.
Illustrons cela immédiatement avec un exemple concret. Pour cela, on va déjà créer une page HTML avec deux boutons et deux éléments div :
See the Pen
Tuto – Afficher / cacher div HTML en JavaScript #1 by Pierre (@pierregiraud)
on CodePen.
On peut également appliquer ne couleur de fond à nos deux div en CSS :
See the Pen
Tuto – Afficher / cacher div HTML en JavaScript #1 by Pierre (@pierregiraud)
on CodePen.
Il ne nous reste plus alors qu’à créer notre JavaScript :
See the Pen
Tuto – Afficher / cacher div HTML en JavaScript #1 by Pierre (@pierregiraud)
on CodePen.
Je présente ici les deux méthodes citées précédemment (afficher et cacher un div en utilisant addEventListener() et onclick).
On commence ici de manière classique par accéder à nos différents éléments HTML en JavaScript en utilisant document.getElementById() et on stocke les différentes références dans des variables.
On attache ensuite un gestionnaire d’évènement click à notre bouton togg1 avec addEventListener(). On va passer deux arguments à cette méthode : le nom d’un évènement qu’on souhaite prendre en charge ainsi que le code à exécuter (qui prendra souvent la forme d’une fonction) en cas de déclenchement de cet évènement.
J’utilise ici une fonction fléchée qui est une notation récente en JavaScript. La partie ()=>{} est équivalente à function(){}. La fonction fléchée est la fonction qui va s’exécuter lors du clic sur #togg1.
Le code de cette fonction commence par récupérer la valeur calculée (valeur courante) de la propriété display du div id="d1" avec getComputedStyle(d1).display et la compare à la valeur none en différence.
Si la valeur récupérée est bien différente de none (c’est-à-dire si le div est visible), on rentre dans le if qui modifie cette valeur afin qu’elle soit égale à none (ce qui cache le div).
Si la valeur récupérée est égale à none, c’est que le div est déjà caché. On rentre alors dans le else et on modifie cette valeur en display: block pour afficher le div.
La deuxième partie de mon code JavaScript produit également le même résultat (avec le bouton #togg2 et le div #d2 mais utilise cette fois-ci un attribut onclick et une fonction nommée classique plutôt que addEventListener() et une fonction fléchée.
Voici le résultat obtenu finalement :
See the Pen
Tuto – Afficher / cacher div HTML en JavaScript #1 by Pierre (@pierregiraud)
on CodePen.
Afficher ou cacher un div lors du survol
On va de la même façon pouvoir afficher / cacher des div ou n’importe quel élément en utilisant différents autres évènements JavaScript comme lors du survol de la souris sur un élément par exemple.
Pour faire cela, on peut par exemple utiliser les évènements mouseover et mouseout ou mouseenter et mouseleave en fonction de la situation et du résultat qu’on souhaite obtenir.
On peut illustrer cela en modifiant légèrement notre exemple précédent de la manière suivante :
Code HTML :
See the Pen
Tuto – Afficher / cacher div HTML en JavaScript #2 by Pierre (@pierregiraud)
on CodePen.
Code CSS :
See the Pen
Tuto – Afficher / cacher div HTML en JavaScript #2 by Pierre (@pierregiraud)
on CodePen.
Code JavaScript :
See the Pen
Tuto – Afficher / cacher div HTML en JavaScript #2 by Pierre (@pierregiraud)
on CodePen.
Résultat :
See the Pen
Tuto – Afficher / cacher div HTML en JavaScript #2 by Pierre (@pierregiraud)
on CodePen.
Cette fois-ci, on veut cacher et ou afficher des éléments selon que l’on passe la souris sur certains autres éléments ou qu’on retire la souris de ces éléments.
Dans notre cas, ce sont les paragraphe #p1 et la liste #l1 contenus dans nos div qui vont être masqués / affichés.
On cache ces éléments par défaut en leur appliquant un display : none. On va ensuite vouloir qu’ils s’affichent lorsque l’utilisateur place sa souris dans le div parent relatif à chaque élément, puis qu’ils soient cachés à nouveau lorsque l’utilisateur retire sa souris du div.
Pour cela, on va se servir ici des évènements mouseover (la souris rentre) et mouseout (la souris sortt) et on va à nouveau pouvoir utiliser soit la méthode addEventListener(), soit un attribut d’évènements pour répondre à ces évènements.
