afficher cacher un div

**Alex35** · 24/10/2007, 17h32

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>
        &nbsp;&nbsp;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

**E.Bzz** · 24/10/2007, 17h39

Bonjour,

Envoyé par Alex35

Suis je clair....

Oui

Utilise

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

au lieu de visibility.

A+

**Alex35** · 24/10/2007, 17h42

merci beaucoup deja

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

et pour l'afficher c'est style.display="????"

**E.Bzz** · 24/10/2007, 17h45

Envoyé par E.Bzz

// ou 'block'

A+

**Alex35** · 24/10/2007, 17h49

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.....

**E.Bzz** · 24/10/2007, 17h51

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

A+

**Alex35** · 24/10/2007, 17h52

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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....

**E.Bzz** · 24/10/2007, 18h05

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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+

**Auteur** · 24/10/2007, 18h07

bonjour,

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
if( Obj.style.display=="none")

**Alex35** · 24/10/2007, 18h08

PARFAIT!!!!!
Encore merci!!!

**E.Bzz** · 24/10/2007, 18h23

Envoyé par Auteur

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
if( Obj.style.display=="none")

Testé sous IE6 => ça suffisait pas

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

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

A+

**Auteur** · 25/10/2007, 22h32

Envoyé par E.Bzz

Testé sous IE6 => ça suffisait pas

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

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...

**E.Bzz** · 26/10/2007, 09h22

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

)

A+

**Auteur** · 26/10/2007, 11h34

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

)

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é)

afficher cacher un div

JavaScript

Discussions similaires

Partager

Partager