Tutoriel Javascript - Afficher/cacher une div

Daniel.Dev

Membre
Inscription
29 Novembre 2016
Messages
151
Réactions
89
Points
1 566
    Réponse de Daniel.Dev Informatique ⌨️ Programmation Programmation web : Javascript - Afficher/cacher une div
  • #1


Bonjour, aujourd'hui on se retrouve pour un tutoriel pour afficher/cacher une div en Javascript. Très simple mais bien utile pour ceux qui ne connaissent pas forcément :)

Commençons par le HTML

Code:
<a href="#" onclick="ShowHide('tutoRealityGaming');">Clique sur moi !</a>
<br /><br />
<div id="tutoRealityGaming" style="display: none;">Bonjour c'est moi, texte caché !</div>
Pas tellement de chose à expliquer ici, à part un lien qui quand on le clique, fais appel à la fonction ShowHide que nous allons définir plus bas, et une div tutoRealityGaming caché.

Voici le Javascript :
Code:
function ShowHide(id) {
    var NameDiv = document.getElementById(id);
    if (NameDiv.style.display === 'none') {
        NameDiv.style.display = 'block';
    } else {
        NameDiv.style.display = 'none';
    }
}
Ici, un peu plus de chose à expliquer, on créer une fonction ShowHide qui contient la valeur id (la valeur id est la valeur de la div caché). On défini une variable NameDiv qui est la valeur id.
Si NameDiv est caché, alors on l'affiche, dans le cas contraire, on le cache.

Voilà le code final une fois mis en place :
 

Haut Bas