Fermer les div déjà ouvertes lors de l'ouverture d'une autre

Version imprimable

Bonjour,

J'ai un code pour ouvrir et fermer une div en masquant un lien. Comme j'ai 3 div masquées, j'ai trois liens.
Quand je clique un lien, la div correspondante s'affiche. Si je clique "fermer" elle se referme.
Si j'ouvre une div puis une autre, la précédente déjà ouverte le reste. Or je voudrais qu'elle se referme. Idem bien sûr si il y a déjà deux div ouvertes et que j'en ouvre une troisième.
Ainsi le but est de n'avoir toujours qu'une seule div ouverte à la fois sans avoir à la ou les fermer manuellement.

Voici le code dans les balises head :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <script type="text/javascript"> function switchDiv1() { var signature = document.getElementById('signature'); if (signature.style.display=="none") signature.style.display = ""; else signature.style.display = "none"; } function switchDiv2() { var envoiMP = document.getElementById('envoiMP'); if (envoiMP.style.display=="none") envoiMP.style.display = ""; else envoiMP.style.display = "none"; } function switchDiv3() { var voirMP = document.getElementById('voirMP'); if (voirMP.style.display=="none") voirMP.style.display = ""; else voirMP.style.display = "none"; } </script>
Et voici le code dans la page :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 Les liens : <span class="java" onClick="switchDiv1();"> modifier la signature</span> <span class="java" onClick="switchDiv2();"> envoyer un MP</span> <span class="java" onClick="switchDiv3();"> voir les MP</span> Les divs : <div class="baliseDiv" style="display:none;" id="signature"> signature <span class="java" onClick="switchDiv1();"> Fermer</span> </div> <div class="baliseDiv" style="display:none;" id="envoiMP"> envoiMP <span class="java" onClick="switchDiv2();"> Fermer</span> </div> <div class="baliseDiv" style="display:none;" id="voirMP"> voirMP <span class="java" onClick="switchDiv3();"> Fermer</span> </div>
Voilà donc en l'état ça fonctionne, mais je ne sais pas comment modifier le code pour qu'à chaque fois que j'ouvre une div la ou les autres se ferment si elles sont ouvertes.

Merci d'avance

Code:

1
2
3
<span class="java" onClick="switchDiv(1);"> modifier la signature</span>
<span class="java" onClick="switchDiv(2);"> envoyer un MP</span>
<span class="java" onClick="switchDiv(3);"> voir les MP</span>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function switchDiv(n){
   var id;
   switch(n){
      case "1": id = "signature"; break;
      case "2": id = "envoiMP";   break;
      case "3": id = "voirMP";    break;
   }
 
   document.getElementById('signature').display = "none";
   document.getElementById('envoiMP').display   = "none";
   document.getElementById('voirMP').display    = "none";
 
   document.getElementById(id).display = "block";
}

23/10/2006, 16h03
Auteur

bonjour,

tu peux également regarder ce code :
http://www.developpez.net/forums/sho...d.php?t=219099
Il a été élaboré pour des listes, mais tu peux facilement l'adapter pour tes div.

Hum, me revoilou :lol:

Alors ce topic date quelque peu, mais je suis de retour sur le problème (je viens d'effacer le dernier message où je remerciais Bisûnûrs et Auteur pour leur aide).

Alors en fait, c'est très simple : ça ne fonctionne pas :roll: .

J'ai essayé le code de Bisûnûrs auquel j'ai ajouté ces lignes :
Code:

1 2 3 4 <div class="baliseDiv" style="display:none;" id="signature"> texte 1 </div> <div class="baliseDiv" style="display:none;" id="envoiMP"> texte 2 </div> <div class="baliseDiv" style="display:none;" id="voirMP"> texte 3 </div>
Mais elles ne s'ouvrent pas. Et donc je ne peux pas tester si celle ouverte se ferme quand on en ouvre une autre. Si j'enlève style="display:none", alors elles s'affichent ouvertes d'office.

Une idée ? :hola:

13/05/2007, 23h17
JackBeauregard

D'ailleurs pourquoi dans le code de bisunurs, y-t'il indiqué switchdiv(1) , alors que dans le code que je donne en haut, c'est switchdiv1() ?

Je sais je suis nul en javascript. :oops:

il y a plusieurs erreurs dans le code de Bisûnûrs :

lors du clic le paramètre transmis est un entier mais dans la fonction Bisûnûrs fait un switch sur des caractères.
Ce n'est pas

Code:

document.getElementById(id).display

mais

Code:

document.getElementById(id).style.display

;)

J'ai rajouté un cas avec n=0 pour masquer tous les 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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
 
<head>
<title></title>
<style type="text/css">
<!--
.java{
 color: #0000FF;
 cursor: pointer;
}
.baliseDiv{
 border: 2px ridge #AAAAAA;
}
//-->
</style>
 
<script type="text/javascript">
<!--
function switchDiv(n)
{  
var id;
  switch(n)
  { 
    case 0:
         id = "";
         break;
    case 1:
         id = "signature";
         break;
    case 2:
         id = "envoiMP";
         break;
    case 3:
         id = "voirMP";
         break;
  }  
  document.getElementById('signature').style.display = "none"; 
  document.getElementById('envoiMP').style.display = "none";
  document.getElementById('voirMP').style.display = "none";
 
  if (id!="")
     document.getElementById(id).style.display = "block";
}
//-->
</script>
 
</head>
 
<body>
 
<span class="java" onclick="switchDiv(1)"> modifier la signature</span>&nbsp;|
<span class="java" onclick="switchDiv(2)"> envoyer un MP</span>&nbsp;|
<span class="java" onclick="switchDiv(3)"> voir les MP</span>
 
<br />
Les divs :
<div class="baliseDiv" style="display:none;" id="signature">
signature
<span class="java" onclick="switchDiv(0)"> Fermer</span>
</div><!--ferme baliseDiv -->
 
<div class="baliseDiv" style="display:none;" id="envoiMP">
envoiMP
<span class="java" onclick="switchDiv(0)"> Fermer</span>
</div><!--ferme baliseDiv -->
 
<div class="baliseDiv" style="display:none;" id="voirMP">
voirMP
<span class="java" onclick="switchDiv(0)"> Fermer</span>
</div><!--ferme baliseDiv -->
 
 
</body>
 
</html>

14/05/2007, 07h37
Bisûnûrs

Mouais, j'ai posté sans vérifier, honte sur moi. :oops: En plus quelles erreurs ...
14/05/2007, 12h00
JackBeauregard

Super, le code d'Auteur fonctionne.

Merci beaucoup de votre patience. :D

Sans vouloir abuser, comme c'est pour un menu déroulant, je pense qu'il serait bien que l'on puisse refermer la div en cliquant sur son lien, par exemple "signature" en plus de pouvoir le faire en cliquant sur "fermer" ou quand on clique sur un autre lien.

Si vous voulez me dire comment faire, ce serait top (mais c'est déjà sympa pour le code de toute façon).

Citation:

Mouais, j'ai posté sans vérifier, honte sur moi. En plus quelles erreurs ...

Y'a pas de mal, j'ai programmé tout un forum en php et j'ai presque terminé un système pour des blogs et je suis toujours aussi nul en javascript... Faudra que j'attaque les tutos de développez, un de ces jours.

on peut mieux faire, mais ça marche :

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
 
<head>
<title></title>
<style type="text/css">
<!--
.java{
 color: #0000FF;
 cursor: pointer;
}
.baliseDiv{
 border: 2px ridge #AAAAAA;
}
//-->
</style>
 
<script type="text/javascript">
<!--
var elmtOuvert = "";
var nOuvert = 0;
 
function switchDiv(n)
{
  var id;
  if (nOuvert==n)
    n = 0;
 
  switch(n)
  { 
    case 0:
         id = "";
         break;
    case 1:
         id = "signature";
         break;
    case 2:
         id = "envoiMP";
         break;
    case 3:
         id = "voirMP";
         break;
  }  
 
  if (elmtOuvert!="")
     document.getElementById(elmtOuvert).style.display = "none";
 
  if (id!="")
     document.getElementById(id).style.display = "block";
 
  elmtOuvert = id;
  nOuvert = n;
}
//-->
</script>
 
</head>
 
<body>
 
<span class="java" onclick="switchDiv(1)"> modifier la signature</span>&nbsp;|
<span class="java" onclick="switchDiv(2)"> envoyer un MP</span>&nbsp;|
<span class="java" onclick="switchDiv(3)"> voir les MP</span>
 
<br />
Les divs :
<div class="baliseDiv" style="display:none;" id="signature">
signature
<span class="java" onclick="switchDiv(0)"> Fermer</span>
</div><!--ferme baliseDiv -->
 
<div class="baliseDiv" style="display:none;" id="envoiMP">
envoiMP
<span class="java" onclick="switchDiv(0)"> Fermer</span>
</div><!--ferme baliseDiv -->
 
<div class="baliseDiv" style="display:none;" id="voirMP">
voirMP
<span class="java" onclick="switchDiv(0)"> Fermer</span>
</div><!--ferme baliseDiv -->
 
 
</body>
 
</html>