Afficher/cacher un div : initialiser caché

Version imprimable

Bonsoir,
j'ai un bon script mais je n'arrive pas à faire en sorte que ma div soit caché au départ quand on ouvre la page! Car je veux utiliser le bouton "Modifier mot de passe" pour l'afficher. Vous auriez une idée? merci !

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
.tran15 {
  -webkit-transition: all 1.5s;
  -moz-transition: all 1.5s;
  -ms-transition: all 1.5s;
  -o-transition: all 1.5s;
  transition: all 1.5s;  
}
 
.tran2 {
  -webkit-transition: all 2s;
  -moz-transition: all 2s;
  -ms-transition: all 2s;
  -o-transition: all 2s;
  transition: all 2s;
}
 
#nav { padding: 1ex; border: 2px solid #aaa; background-color: #ccf; margin: 1em; width: 20em; }
#nav:hover { border: 2px solid #ddd; background-color: #eef; }
#nav h2 { display: inline; vertical-align: middle; }
 
.hide, .show  { display: none;  font-size: 80%; vertical-align: middle; }
 
@media all and (min-width:1px) { .hide, .show  { display: inline; } }
 
a.hide:focus + .show { display: inline; }
.show { display: none; }
a.hide:focus { display: none; }
 
#menu { opacity: 1; height:300px; margin-top: 0em; width: auto; margin-left: -1ex; overflow: hidden; }
a.hide:focus ~ #menu { opacity: 0; height: 0em; }
 
@media print {
.hide, .show  { display: none; }
#nav {position: static; border: none; width: auto;}
#menu {width: auto;} 
}

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="nav" class="tran2">
<a href="#" class="hide">Annuler</a>
<a href="#" class="show">Modifier le mot de passe</a> 
<div id="menu" class="tran15">
<form method="POST" action="/<?php echo $nom; ?>/index.php">
        <p>Nom :</p>
        <input type="text" name="nom" placeholder="<?php echo $nom; ?>">
        <p>Ancien mot de passe :</p>
        <input type="password" name="mdpa">
        <p>Nouveau mot de passe :</p>
        <input type="password" name="nvmdp">
        <p>Confirmer nouveau mot de passe :</p>
        <input type="password" name="nvmdp2">
        <input type="submit" value="Valider" name="submodif">
        </form>
</div></div>

11/10/2013, 03h22
miltone

tu parle d'un div alors que dans ton code il y en a 2.
De plus je ne sais pas pour les autres mais moi j'ai du mal à lire ton code CSS présenter en ligne. C'est vraiment pas pratique et décourageant pour le lire.
(ce n'est que mon point de vue biensur)

Utilise du jQuery

Oublie pas d'inclure le jQuery dans ton document

CSS

Code:

#menu {display:none;}

HTML

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="nav" class="tran2">
<a href="#" class="hide">Annuler</a>
<a href="#" class="show" id="btn_modPass">Modifier le mot de passe</a> 
<div id="menu" class="tran15">
<form method="POST" action="/<?php echo $nom; ?>/index.php">
        <p>Nom :</p>
        <input type="text" name="nom" placeholder="<?php echo $nom; ?>">
        <p>Ancien mot de passe :</p>
        <input type="password" name="mdpa">
        <p>Nouveau mot de passe :</p>
        <input type="password" name="nvmdp">
        <p>Confirmer nouveau mot de passe :</p>
        <input type="password" name="nvmdp2">
        <input type="submit" value="Valider" name="submodif">
        </form>
</div></div>

Code:

1
2
3
$("#btn_modPass").click(function(){
 $("#menu").css("display", "block");
});

11/10/2013, 21h18
Anonyme1784

Merci,
je n'ai pas bien compris votre message...
"jQuery" comment je l'inclus?
+ Je ne vois pas ce que vous avez fait dans le code posté de différent de moi...

EDIT : j'ai vu les modif enfait mais je comprends pas pour le jQuery
12/10/2013, 10h53
papajoker
Citation:

Envoyé par To175

EDIT : j'ai vu les modif enfait mais je comprends pas pour le jQuery

ca c'est du code jquery, le changement au click est fait par jquery
Code:

1 2 3 $("#btn_modPass").click(function(){ $("#menu").css("display", "block"); });
Citation:

"jQuery" comment je l'inclus?

une petite recherche :google:
12/10/2013, 12h27
rodolphebrd

:recherch:
Ne pas oublier la Faq Jquery du forum
13/10/2013, 09h55
JefReb

Bonjour,
J'aime bien regarder et essayer les solutions données pour me perfectionner et comprendre.
J'ai essayé la solution jquery de caroe.lavoie, mais désolé, elle ne fonctionne pas ou ... j'ai fait une grosse erreur.
Je l'ai testé dans un html et dans JSFiddle.
Voir le résultat ici: http://jsfiddle.net/JefReb/rSGyp/
Une idée de l'erreur?
13/10/2013, 10h34
Anonyme1784

Merci,
je vous prie de bien vouloir m'excuser, dès que j'ai demandé je suis allé sur google ^^' et j'ai oublié d"enlever ma question :p
Sinon ça ne fonctionne pas en effet... et je ne voudrais pas perdre la transition progressive !
13/10/2013, 10h46
NoSmoking

Bonjour,
au vu de l'exemple que tu mets j'aurais plusieurs remarques.

Il semblerait qu'il te faille simplement inverser ton raisonnement entre le hide et le show tu à exactement l'effet inverse de ce que tu cherches.

Il ne me paraît pas judicieux d'utiliser la pseudoclass :focus, attendu que tu veux afficher un formulaire ce qui sous entend que les champs vont obligatoirement prendre le focus donc l'enlever au lien et le formulaire va immédiatement se cacher, tu n'est pas prêt de saisir quoique ce soit.

Si tu veux conserver une compatibilité maximum il est effectif qu'il te faudra passer par le javascript.

Citation:

et je ne voudrais pas perdre la transition progressive !

cela reste du cosmétique et utiliser jQuery uniquement pour cela me paraît un peu lourd.

Je ne retrouve pas la discussion mais ce code semble répondre à ton besoin :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE>
<html>
  <head>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
    <script>
function expand(id, expanded){
  var Item = document.getElementById(id); 
  if(expanded=== undefined){
    expanded = (Item.offsetWidth == 0); //toggle expanded state
  }
 
  Item.style.display = expanded ? "block" : "none"; 
  document.getElementById(id+'Bt').href = expanded ? "#expanded" : "#";
  document.getElementById(id+'Bt').innerHTML = expanded ? "Fermer" : "Ouvrir";
 
}
function init() {
    expand("test1", window.location.hash==="#expanded");
}
</script> 
  </head>
    <body onload="init();">
<a id="test1Bt" href="#" onclick="expand('test1');">Ouvrir</a>
<div id="test1">
test1<br />
</div> 
  </body>
</html>