YOUPASS - convertir le crédit téléphonique en monnaie ! : Partenaire RealityGaming.fr

Tutoriel Javascript - Afficher/cacher une div

Daniel.Dev

Membre
Inscription
29 Novembre 2016
Messages
130
Réactions
84
Points
1 506
    Réponse de Daniel.Dev Forums généraux Informatique ⌨️ Programmation Programmation web : Javascript - Afficher/cacher une div
  • #1
Vous devez être inscrit pour voir les images


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 :
 

Mobile app for XenForo 2 by Appify
Haut