Connexion
S'inscrire
Actualités
Quoi de neuf
Activités générales
Auteurs
Forums
Nouveaux messages
Rechercher un forum
Quoi de neuf
Nouveaux messages
Nouveaux messages de profil
Activités générales
Membres
Membres inscrits
Visiteurs actuels
Nouveaux messages de profil
Rechercher dans les messages des profils
Teams
Créé ton équipe
Quoi de neuf ?
Nouveaux messages
Rechercher un forum
Menu
Connexion
S'inscrire
Install the app
Install
Forums
Forums généraux
Informatique
Développement
Javascript - Afficher/cacher une div
JavaScript is disabled. For a better experience, please enable JavaScript in your browser before proceeding.
Vous utilisez un navigateur non à jour ou ancien. Il ne peut pas afficher ce site ou d'autres sites correctement.
Vous devez le mettre à jour ou utiliser un
navigateur alternatif
.
Répondre à la discussion
Message
<blockquote data-quote="Daniel.Dev" data-source="post: 7138088" data-attributes="member: 714329"><p style="text-align: center"><img src="https://i.imgur.com/qS3S2HZ.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></p> <p style="text-align: center"></p> <p style="text-align: center">Bonjour, aujourd'hui on se retrouve pour un tutoriel pour <strong>afficher/cacher une div</strong> en <strong>Javascript</strong>. Très simple mais bien utile pour ceux qui ne connaissent pas forcément <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite355" alt=":)" title=":) :)" loading="lazy" data-shortname=":)" /></p> <p style="text-align: center"></p> <p style="text-align: center">Commençons par le <strong>HTML</strong></p> <p style="text-align: center"></p> <p style="text-align: center">[CODE]<a href="#" onclick="ShowHide('tutoRealityGaming');">Clique sur moi !</a></p> <p style="text-align: center"><br /><br /></p> <p style="text-align: center"><div id="tutoRealityGaming" style="display: none;">Bonjour c'est moi, texte caché !</div>[/CODE]</p> <p style="text-align: center"></p> <p style="text-align: center">Pas tellement de chose à expliquer ici, à part un lien qui quand on le clique, fais appel à la fonction <strong>ShowHide</strong> que nous allons définir plus bas, et une <strong>div tutoRealityGaming caché</strong>.</p> <p style="text-align: center"></p> <p style="text-align: center">Voici le <strong>Javascript </strong>:</p> <p style="text-align: center">[CODE]function ShowHide(id) {</p> <p style="text-align: center"> var NameDiv = document.getElementById(id);</p> <p style="text-align: center"> if (NameDiv.style.display === 'none') {</p> <p style="text-align: center"> NameDiv.style.display = 'block';</p> <p style="text-align: center"> } else {</p> <p style="text-align: center"> NameDiv.style.display = 'none';</p> <p style="text-align: center"> }</p> <p style="text-align: center">}[/CODE]</p> <p style="text-align: center">Ici, un peu plus de chose à expliquer, on créer une fonction <strong>ShowHide </strong>qui contient la valeur id (la valeur id est la valeur de la div caché). On défini une variable <strong>NameDiv </strong>qui est la valeur <strong>id</strong>.</p> <p style="text-align: center">Si <strong>NameDiv </strong>est <strong>caché</strong>, alors <strong>on l'affiche</strong>, dans <strong>le cas contraire, on le cache</strong>.</p> <p style="text-align: center"></p> <p style="text-align: center"><strong>Voilà le code final une fois mis en place :</strong></p> <p style="text-align: center"><a href="https://codepen.io/anon/pen/pwJNOV" target="_blank">https://codepen.io/anon/pen/pwJNOV</a></p></blockquote><p></p>
[QUOTE="Daniel.Dev, post: 7138088, member: 714329"] [CENTER][IMG]https://i.imgur.com/qS3S2HZ.png[/IMG] Bonjour, aujourd'hui on se retrouve pour un tutoriel pour [B]afficher/cacher une div[/B] en [B]Javascript[/B]. Très simple mais bien utile pour ceux qui ne connaissent pas forcément :) Commençons par le [B]HTML[/B] [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>[/CODE] Pas tellement de chose à expliquer ici, à part un lien qui quand on le clique, fais appel à la fonction [B]ShowHide[/B] que nous allons définir plus bas, et une [B]div tutoRealityGaming caché[/B]. Voici le [B]Javascript [/B]: [CODE]function ShowHide(id) { var NameDiv = document.getElementById(id); if (NameDiv.style.display === 'none') { NameDiv.style.display = 'block'; } else { NameDiv.style.display = 'none'; } }[/CODE] Ici, un peu plus de chose à expliquer, on créer une fonction [B]ShowHide [/B]qui contient la valeur id (la valeur id est la valeur de la div caché). On défini une variable [B]NameDiv [/B]qui est la valeur [B]id[/B]. Si [B]NameDiv [/B]est [B]caché[/B], alors [B]on l'affiche[/B], dans [B]le cas contraire, on le cache[/B]. [B]Voilà le code final une fois mis en place :[/B] [URL]https://codepen.io/anon/pen/pwJNOV[/URL][/CENTER] [/QUOTE]
Insérer les citations…
Vérification
Publier la réponse
Forums
Forums généraux
Informatique
Développement
Javascript - Afficher/cacher une div
Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
Acceptez
En savoir plus.…
Haut