11548 sujets

JavaScript, DOM et API Web HTML5

D'abord cacher un élément avant de le faire apparaitre ?

bonjour je souhaite utiliser un bouton pour faire apparaitre/disparaitre un paragraphe

voici l'exemple trouvé sur jquery


<!DOCTYPE html>
<html>
<head>
  <style>
p { background:#dad;
font-weight:bold;
font-size:16px; }
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <button>Toggle 'em</button>

<p>Hiya</p>
<p>Such interesting text, eh?</p>
<script>
$("button").click(function () {
$("p").toggle("slow");
});    
</script>

</body>
</html>


mon problème est que le paragraphe est affiché quand je lance la page
alors que je souhaiterais qu'il soit d'abord caché puis qu'il apparaisse quand on clique sur le bouton ...

merci pour votre aide !
++
Pour faire ça tu vas avoir besoin de plusieurs choses :

- un petit script à charger le plus tôt possible (en haut de page) qui ne fait qu’ajouter une classe .js à ton document ;
- un sélecteur CSS qui va se charger de masquer l’élément que tu souhaites animer en s’appuyant sur cette nouvelle classe (.js #element{display: none}) ;
- un comportement à déclencher au clique sur ton bouton (en gros ce que tu fais déjà).

Tu as ainsi une solution rapide (pas de clignotement de l’élément au chargement) et robuste puisqu'elle fonctionnera également lorsque JS est désactivé (l’élément est visible par défaut).
Vincent Valentin a écrit :

- un petit script à charger le plus tôt possible (en haut de page) qui ne fait qu’ajouter une classe .js à ton document ;
- un sélecteur CSS qui va se charger de masquer l’élément que tu souhaites animer en s’appuyant sur cette nouvelle classe (.js #element{display: none}) ;
- un comportement à déclencher au clique sur ton bouton (en gros ce que tu fais déjà).

Tu as ainsi une solution rapide (pas de clignotement de l’élément au chargement) et robuste puisqu'elle fonctionnera également lorsque JS est désactivé (l’élément est visible par défaut).


Ahhh mais c'est bien ça !

J'ai testé en rajoutant, dans l'élément head :


document.getElementsByTagName('html')[0].className += 'js';


Tu procèdes de la même façon ?
Yep !

(Bon perso je rajoute une détection navigateurs aussi à cet endroit (le mal !) mais j’utilise ça avec les précautions qui s’imposent.)
Penser à mettre un espace au début de la chaine ajoutée à className, au cas où il y ait déjà une valeur:
document.documentElement.className += ' js';
Ah yes, merci. Et le documentElement pour cibler l'élément HTML (jQuery c'est sympa mais j'oublie complétement les bases depuis que je tourne sous ce framework).
Modifié par jb_gfx (28 Nov 2011 - 23:25)
Merci beaucoup pour toutes vos réponses

finalement il a suffit de rajouter

.element {display: none;}


et ça fonctionne super ! mais j'ai peut-être raté quelque chose ?
billboc a écrit :
mais j'ai peut-être raté quelque chose ?

Oui: si JavaScript est désactivé, ton élément est caché et l'utilisateur ne dispose d'aucun moyen pour l'afficher (vu que le moyen pour l'afficher utilise JavaScript).

L'idée pour palier à ça est donc d'ajouter une classe "js" sur l'élément html en JavaScript, et d'utiliser un sélecteur comme suit:
.js .element {display: none;}
Sujet clos
Aller à