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

**JackBeauregard** · 23/10/2006, 15h38

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 :

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

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
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><!--ferme baliseDiv -->
 
<div class="baliseDiv" style="display:none;" id="envoiMP"> 
envoiMP
<span class="java" onClick="switchDiv2();"> Fermer</span> 
</div><!--ferme baliseDiv -->
 
<div class="baliseDiv" style="display:none;" id="voirMP"> 
voirMP
<span class="java" onClick="switchDiv3();"> Fermer</span> 
</div><!--ferme baliseDiv -->

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

**Bisûnûrs** · 23/10/2006, 15h49

Code HTML :

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

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 Javascript :

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

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";
}

**Auteur** · 23/10/2006, 16h03

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.

**JackBeauregard** · 13/05/2007, 21h18

Hum, me revoilou

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

.

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

Code :

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

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 ?

**JackBeauregard** · 13/05/2007, 23h17

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.

**Auteur** · 14/05/2007, 01h54

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 : Sélectionner tout - Visualiser dans une fenêtre à part
```
document.getElementById(id).display
```
mais
Code : Sélectionner tout - Visualiser dans une fenêtre à part
```
document.getElementById(id).style.display
```

J'ai rajouté un cas avec n=0 pour masquer tous les div.

Code html :

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

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

Mouais, j'ai posté sans vérifier, honte sur moi.

En plus quelles erreurs ...

**JackBeauregard** · 14/05/2007, 12h00

Super, le code d'Auteur fonctionne.

Merci beaucoup de votre patience.

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

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.

**Auteur** · 17/05/2007, 00h43

on peut mieux faire, mais ça marche :

Code html :

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

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

JavaScript

Discussions similaires

Partager

Partager