Javascript - Afficher/cacher une div

D

Daniel.Dev

Membre
Inscription
29 Novembre 2016
Messages
160
Réactions
90
Points
1 566
qS3S2HZ.png


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 :
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
 
Haut