afficher cacher un div

Version imprimable

Bonjour,
je cherche un code tout simple, que j'ai trouvé d'ailleurs pour me permettre d'afficher et de cacher un tableau contenu dans une div:
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 <html> <title>Toto</title> <script type="text/javascript"> //----------------------- function DivStatus( div_){ var Obj = document.getElementById( div_); if( Obj.style.visibility=="hidden"){ Obj.style.visibility ="visible"; } else{ Obj.style.visibility="hidden"; } } </script> <body> <table width="100%" cellspacing="2" cellpadding="2" border="0"> <tr> <td> <a href="javascript:DivStatus('rub6');">x</a>   Afficher/Cacher le Div </td> </tr> </table> <div id="rub6" style="background-color:#FF0000;visibility:hidden;"> <table width="100%" cellpadding="3" cellspacing="2" border="1"> <tr><td>Texte<br />Texte<br />Texte</td></tr> <tr><td>Lien<br />Lien<br />Lien</td></tr> </table> </div> </body> </html>
ce code fonctionnne tres bien malheureuresement lorsque la div est 'hidden' il y a dans la page la place pour l'afficher, or j'aimerais lorsque l'on ne la voit pas il n'y ait pas d'espace et l'espace se crée lorsque l'on l'affiche....
Suis je clair....:?

D'ava,ce merci

Alexis

24/10/2007, 17h39
E.Bzz

Bonjour,

Citation:

Envoyé par Alex35

Suis je clair....:?

Oui :D

Utilise

Code:

style.display='none'; // ou 'block'

au lieu de visibility.

A+
24/10/2007, 17h42
Alex35

merci beaucoup deja

donc style.display="none" c'est pour le cacher

et pour l'afficher c'est style.display="????"
24/10/2007, 17h45
E.Bzz

Citation:

Envoyé par E.Bzz

// ou 'block'

;)

A+
24/10/2007, 17h49
Alex35

en effet desole.....

MERCI beaucoup!!!

par contre avec ce petit bout de code le texte "salut se decale bien, mais si je reclique sur le lien, le tableau ne redisparait pas.....
24/10/2007, 17h51
E.Bzz

Fais voir comment tu as adapté ton script.
Manque peut-être quelque chose ....

A+

en effet c'est la fin de journée, je n'avais pas mis le code....:roll:

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
<html>
<title>Toto</title>
<script type="text/javascript">
//-----------------------
function DivStatus( div_){
  var Obj = document.getElementById( div_);
  if( Obj.style.display="none"){
    Obj.style.display="block";
  }
  else{
    Obj.style.display="none";
  }
}
 
</script>
<body>
  <table width="100%" cellspacing="2" cellpadding="2" border="0">
    <tr>
      <td>
        <a href="javascript:DivStatus('rub6');">x</a>
        &nbsp;&nbsp;Afficher/Cacher le Div
      </td>
    </tr>
  </table>
  <div id="rub6" style="background-color:#FF0000;display:none;">
    <table width="100%" cellpadding="3" cellspacing="2" border="1">
      <tr ><td>Texte<br />Texte<br />Texte</td></tr>
      <tr><td>Lien<br />Lien<br />Lien</td></tr>
    </table>
  </div>
  salut
</body>
</html>

donc voila le texte "salut se decale bien, le tableau apparait au premier click, nickel, par contre pour le faire dispsraitre lorsque je reclic, la ca ne fonctionne pas il reste toujours la....

Manquait le <head>.
Et la comparaison, c'est == ;)

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
<html>
<title>Toto</title>
<head>
<script type="text/javascript">
//-----------------------
function DivStatus( div_){
  var Obj = document.getElementById( div_);
    Obj.style.display=(Obj.style.display=="none")?"block":"none";
}
</script>
</head>
<body>
  <table width="100%" cellspacing="2" cellpadding="2" border="0">
    <tr>
      <td>
        <a href="javascript:DivStatus('rub6');">x</a>
        &nbsp;&nbsp;Afficher/Cacher le Div
      </td>
    </tr>
  </table>
  <div id="rub6" style="background-color:#FF0000;display:none;">
    <table width="100%" cellpadding="3" cellspacing="2" border="1">
      <tr ><td>Texte<br />Texte<br />Texte</td></tr>
      <tr><td>Lien<br />Lien<br />Lien</td></tr>
    </table>
  </div>
  salut
</body>
</html>

A+

24/10/2007, 18h07
Auteur
bonjour,
Code:

1 2 if( Obj.style.display=="none")
;)
24/10/2007, 18h08
Alex35

PARFAIT!!!!!
Encore merci!!!:king:
24/10/2007, 18h23
E.Bzz
Citation:
Envoyé par Auteur

Code:

1 2 if( Obj.style.display=="none")
Testé sous IE6 => ça suffisait pas :koi:

Juste l'ajout du <head>, je vois pas pourquoi ....

Bref ça n'a fonctionné que quand j'ai changé la syntaxe du if ....

A+
25/10/2007, 22h32
Auteur

Citation:

Envoyé par E.Bzz

Testé sous IE6 => ça suffisait pas :koi:

Juste l'ajout du <head>, je vois pas pourquoi ....

Bref ça n'a fonctionné que quand j'ai changé la syntaxe du if ....

A+

euh, je n'ai pas compris :oops: Quand j'ai écrit mon message, le tien n'était pas encore posté. Et je n'ai pas fait attention que le head était absent du code.

L'égalité en Javascript est : Si (valeur1==valeur2)
Quant au head il est obligatoire...
26/10/2007, 09h22
E.Bzz

Citation:

Envoyé par Auteur

euh, je n'ai pas compris

Ce que je voulais dire :
je suis parti du code initiale => j'ai commencé par corriger le test "==" => pas mieux => ajouté le <head> => pas mieux.
Il n'y a que quand j'ai changé la syntaxe du if then else en x=(cond)?a:b que ça a fonctionné.
Ce que je ne comprenais pas (j'ai dû faire une boulette intermédiaire :mrgreen: )

A+
26/10/2007, 11h34
Auteur

Citation:

Envoyé par E.Bzz

Ce que je voulais dire :
je suis parti du code initiale => j'ai commencé par corriger le test "==" => pas mieux => ajouté le <head> => pas mieux.
Il n'y a que quand j'ai changé la syntaxe du if then else en x=(cond)?a:b que ça a fonctionné.
Ce que je ne comprenais pas (j'ai dû faire une boulette intermédiaire :mrgreen: )

A+

Sans doute :)
Tu as dû oublier de mettre à jour la page qui était déjà chargée dans ton navigateur (et donc tu étais toujours sur une page avec un code erroné) ;)