[Problème] Avec un javascript pour montrer/cacher un div

**draho** · 28/08/2006, 12h12

salut à tous, bon voilà, j'utilise ce js pour montrer/cacher un div

Code :

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

1
2
3
4
5
6
7
8
function montrer(etat, id) 
	{
	var el = document.getElementById(id);
	if (etat == true)
		{el.style.display="block";}
	else
		{el.style.display="none";}
	}

Je l'utilise sur des "input" de type "radio". A chaque radio, j'affiche un div différent.
Lorsque le clique sur un radio, cela affiche le div qui va bien. ça OK.
Mais lorsque je clique sur un autre radio, le 2eme div s'affiche, mais le 1er ne disparait pas

Je voudrai savoir comment modifier mon js pour qu'un seul div soit affiché.

Merci d'avance, en espérant avoir été clair.

**KiLVaiDeN** · 28/08/2006, 12h15

Salut,

Le plus simple : créer une fonction "reset" qui mettrait tous tes DIV en hidden. (display:none)

Et tu appelles ta fonction reset() avant l'appel à montrer().

A+

**navis84** · 28/08/2006, 12h21

Bonjour,

voici les fonctions javascript que j'utilise pour cacher / afficher mes blocs. Si ça peut aider.

s représente l'id du bloc.

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
function afficher(s)
{
	document.getElementById(s).style.visibility='visible';
	document.getElementById(s).style.position='static';
}
 
 
function cacher(s)
{
	document.getElementById(s).style.visibility='hidden';
	document.getElementById(s).style.position='absolute';
}
 
function inverser(s)
{
		if(document.getElementById(s).style.visibility=='hidden')
		{
				afficher(s);
		}
		else
		{
				cacher(s);
		}
}

**draho** · 28/08/2006, 14h05

Envoyé par KiLVaiDeN

Salut,

Le plus simple : créer une fonction "reset" qui mettrait tous tes DIV en hidden. (display:none)

Et tu appelles ta fonction reset() avant l'appel à montrer().

A+

ça je ne sais pas faire :/ (je veux dire que que TOUS les div soit en hidden)

**KiLVaiDeN** · 28/08/2006, 14h08

C'est facile : tu appelles séquentiellement des "montrer" à false, sur tous les divs que tu veux cacher

quelque chose comme :

Code :

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

1
2
3
4
5
6
function toutCacher() {
  montrer(false,'div1');
  montrer(false,'div2');
  montrer(false,'div3');
  montrer(false,'div4');
}

Et dans ton évènement JavaScript :

Code :

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

onClick="toutCacher(); montrer('true','div1')"

Par exemple..

Sinon, tu peux mémoriser à chaque appel de montrer, le div en cours d'affichage; et ainsi, optimiser tout ça, au lieu d'appeller plusieurs fois la même méthode: c'est plus propre, mais bon un peu plus compliqué. Je ne sais pas si tu vois dans l'idée

A+

**draho** · 28/08/2006, 14h13

ok je vois, mais ton système nécessite donc de connaitre tous les divs présents . . . Il y a plus qu'à trouver un moyen de le référencer

Sinon pour la deuxième solution, je vois ce que tu veux dire mais ça me parait au delà de mes compétences

**KiLVaiDeN** · 28/08/2006, 14h21

Envoyé par draho

ok je vois, mais ton système nécessite donc de connaitre tous les divs présents . . . Il y a plus qu'à trouver un moyen de le référencer

Sinon pour la deuxième solution, je vois ce que tu veux dire mais ça me parait au delà de mes compétences

en haut de 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
<script language="JavaScript">
var lastShowedDiv = 'firstValue';
 
function montrerDiv(etat, nomDiv) {
  if( etat ) {
    if( lastShowedDiv != 'firstValue' ) // On cherche à afficher un div, il faut mettre l'ancien en hidden, si il existe
		document.getElementById(lastShowedDiv).style.display='none';
 
	lastShowedDiv = nomDiv;
	document.getElementById(nomDiv).style.display='block';
  }
  else {
	document.getElementById(nomDiv).style.display='none';
  }
 
}
</script>

**javatwister** · 28/08/2006, 14h27

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
<div id="d0">Vous avez cliqué sur le premier bouton.</div>
<div id="d1">Vous avez cliqué sur le deuxième bouton.</div>
<div id="d2">Vous avez cliqué sur le troisième bouton.</div>
 
 
<p>
<input type="radio" name="r" value="1" />bouton 1<br />
<input type="radio"  name="r" value="2" />bouton 2<br />
<input type="radio"  name="r" value="3" />bouton 3
</p>
 
 
<script type="text/javascript">
 
var lequel;
 
var ra=document.getElementsByName("r");
for(i=0;i!=ra.length;i++){
	ra[i].ind=i;
	ra[i].onclick=function(){
		if(lequel){
			lequel.style.display="none";
		}
 
		lequel=document.getElementById("d"+this.ind);
		lequel.style.display="block"
 
	}
}
</script>

**draho** · 28/08/2006, 14h30

Envoyé par KiLVaiDeN

.

ça me pose problème car j'ai plusieurs niveau de "radio".
Quand je clique sur un radio, ça affiche une 2eme ligne de "radio" et donc quand je sélectionne un radio de cette 2eme ligne, ça cache tout :s (je sais je suis pas très clair mais c'est difficile à expliquer)

en fait je voudrai que ma fonction cache/affiche également en fonction du 'name' du 'radio'

**draho** · 28/08/2006, 17h26

je commence à désespérer là

personne comprend mon problème ou il est insurmontable?

**KiLVaiDeN** · 28/08/2006, 17h29

Envoyé par draho

ça me pose problème car j'ai plusieurs niveau de "radio".
Quand je clique sur un radio, ça affiche une 2eme ligne de "radio" et donc quand je sélectionne un radio de cette 2eme ligne, ça cache tout :s (je sais je suis pas très clair mais c'est difficile à expliquer)

en fait je voudrai que ma fonction cache/affiche également en fonction du 'name' du 'radio'

Hmm.

En gros, tu as un radio, qui affiche un div, qui lui meme contient des radios qui affichent des div ? lol

Dans ce cas, tu implémentes plusieurs fonctions, une par niveau... Mais ça parrait être une petite usine à gaz ton truc

Par exemple :

Code :

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

1
2
 toutcacherniveau2()
montrerNiveau2()

A+

**SpaceFrog** · 28/08/2006, 17h30

Code :

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

1
2
3
4
5
function montrer(Elt) 
	{
	 Obj= document.getElementById(Elt);
	 Obj.style.display= (Obj.style.display=="block")?"none":"block";
        }

le style est il initialisé dans la balise ?

6000 ème message

**javatwister** · 28/08/2006, 22h24

bon, restons calmes et n'ayons pas l'impression de parler dans le vide;
en intégrant les nouvelles "contraintes", ça donnerait ça?

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
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>...</title>
 
<style type="text/css">
 
#d0, #d1, #d2 {
display:none;
}
 
</style>
 
 
</head>
 
<body>
 
 
<p style="margin-bottom:50px;width:200px;text-align:center;border:solid 1px #000000">
<input type="radio" name="r" value="1" />bouton 1<br />
<input type="radio"  name="r" value="2" />bouton 2<br />
<input type="radio"  name="r" value="3" />bouton 3</p>
</p>
 
<div id="d0">Vous avez cliqué sur le premier bouton.<br />
<input type="radio" name="r0" value="1" />choix 1 du premier menu<br />
<input type="radio"  name="r0" value="2" />choix 2 du premier menu<br />
<input type="radio"  name="r0" value="3" />choix 3  du premier menu
</div>
<div id="d1">Vous avez cliqué sur le deuxième bouton.<br />
<input type="radio" name="r1" value="1" />choix 1 du deuxième menu<br />
<input type="radio"  name="r1" value="2" />choix 2 du deuxième menu<br />
<input type="radio"  name="r1" value="3" />choix 3 deuxième menu
</div>
<div id="d2">
Vous avez cliqué sur le troisième bouton.<br />
<input type="radio" name="r2" value="1" />choix 1 du troisième menu<br />
<input type="radio"  name="r2" value="2" />choix 2 du troisième menu<br />
<input type="radio"  name="r2" value="3" />choix 3 du troisième menu
</div>
 
 
<script type="text/javascript">
 
var lequel;
var ra=document.getElementsByName("r");
 
for(i=0;i!=ra.length;i++){
	ra[i].ind=i;
	ra[i].onclick=function(){
		if(lequel){
			lequel.style.display="none";
		}
 
		lequel=document.getElementById("d"+this.ind);
		lequel.style.display="block";
 
 
	}
}
 
 
</script> 
 
</body>
</html>

**draho** · 29/08/2006, 09h26

désolé javatwister, mais tu donne ton code sans explication ni rien, c'est pas évident...

m'enfin je vais essayer de déchiffrer ça.

**javatwister** · 29/08/2006, 09h48

désolé, c'est une habitude que j'ai sur les forums: si tu regarde bien, tu verras qu'il s'agit d'une page complète ... désolé de ne pas avoir mis le résultat en ligne, j'oublie parfois

http://javatwist.imingo.net/radio.htm

**draho** · 29/08/2006, 10h13

Envoyé par javatwister

désolé, c'est une habitude que j'ai sur les forums: si tu regarde bien, tu verras qu'il s'agit d'une page complète ... désolé de ne pas avoir mis le résultat en ligne, j'oublie parfois

Ok merci . . .

En tout cas, en copiant/collant ton code, j'obtiens pas vraiment ce que je veux. Il faudrai que quand je clique sur "choix 1 du troisième menu" par exemple, ça ouvre une autre ligne de radio.

**javatwister** · 29/08/2006, 10h21

quelqu'un pour prendre le relais, pendant que je mets à jour l'exemple?

**SpaceFrog** · 29/08/2006, 10h26

alors en stock il nous reste :
intérieur cuir
peinutre métalisée
jantes alliage
GPS avec supplément
ceintures de sécurité en organdi
volant en moumoute

et pour un euro de plus on l'mballe dasn du papier de soie et on livre à domicile

**javatwister** · 29/08/2006, 13h56

voilà, c'est à hurler de rire du point de vue de la rentabilité et de l'ergonomie:

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
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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>...</title>
 
<style type="text/css">
 
div div {
display:none;
}
 
</style>
 
 
</head>
 
<body>
 
 
<div style="margin-bottom:50px;width:150px;padding-left:50px;">
<input type="radio" name="r" value="1" />111<br />
<input type="radio"  name="r" value="2" />222<br />
<input type="radio"  name="r" value="3" />333
</div>
 
<div style="margin-bottom:50px;padding-left:100px">
<div id="d0">Vous avez choisi la première option<br />
<input type="radio" name="r0" value="1" />444<br />
<input type="radio"  name="r0" value="2" />555<br />
<input type="radio"  name="r0" value="3" />666
</div>
<div id="d1">Vous avez choisi la deuxième option.<br />
<input type="radio" name="r1" value="1" />777<br />
<input type="radio"  name="r1" value="2" />888<br />
<input type="radio"  name="r1" value="3" />999
</div>
<div id="d2">Vous avez choisi la troisième option.<br />
<input type="radio" name="r2" value="1" />101010<br />
<input type="radio"  name="r2" value="2" />111111<br />
<input type="radio"  name="r2" value="3" />121212
</div>
</div>
 
<div style="margin-bottom:50px;padding-left:150px">
<div id="d3">Démerdez-vous pour savoir d'où vous venez.<br />
<input type="radio" name="op3" value="1" />131313<br />
<input type="radio"  name="op3" value="2" />141414<br />
<input type="radio"  name="op3" value="3" />151515
</div>
<div id="d4">Démerdez-vous pour savoir d'où vous venez.<br />
<input type="radio" name="op4" value="1" />161616<br />
<input type="radio" name="op4" value="2" />171717<br />
<input type="radio" name="op4" value="3" />181818
</div>
<div id="d5">Démerdez-vous pour savoir d'où vous venez.<br />
<input type="radio" name="op5" value="1" />191919<br />
<input type="radio" name="op5" value="2" />202020<br />
<input type="radio" name="op5" value="3" />212121
</div>
<div id="d6">Démerdez-vous pour savoir d'où vous venez.<br />
<input type="radio" name="op6" value="1" />222222<br />
<input type="radio" name="op6" value="2" />232323<br />
<input type="radio" name="op6" value="3" />242424
</div>
<div id="d7">Démerdez-vous pour savoir d'où vous venez.<br />
<input type="radio" name="op7" value="1" />252525<br />
<input type="radio" name="op7" value="2" />262626<br />
<input type="radio" name="op7" value="3" />272727
</div>
<div id="d8">Démerdez-vous pour savoir d'où vous venez.<br />
<input type="radio" name="op8" value="1" />282828<br />
<input type="radio" name="op8" value="2" />292929<br />
<input type="radio" name="op8" value="3" />303030
</div>
<div id="d9">Démerdez-vous pour savoir d'où vous venez.<br />
<input type="radio" name="op9" value="1" />313131<br />
<input type="radio" name="op9" value="2" />323232<br />
<input type="radio" name="op9" value="3" />333333
</div>
<div id="d10">Démerdez-vous pour savoir d'où vous venez.<br />
<input type="radio" name="op10" value="1" />343434<br />
<input type="radio" name="op10" value="2" />353535<br />
<input type="radio" name="op10" value="3" />363636
</div>
<div id="d11">Démerdez-vous pour savoir d'où vous venez.<br />
<input type="radio" name="op11" value="1" />373737<br />
<input type="radio" name="op11" value="2" />383838<br />
<input type="radio" name="op11" value="3" />393939
</div>
</div>
 
<script type="text/javascript">
 
 
var t=[];
 
var lequel, laquelle;
var ra=document.getElementsByTagName("input");
	for(i=0;i!=ra.length;i++){
		ra[i].ind=i;
		if(ra[i].name.charAt(0)=="r"){
			t.push(ra[i])
		}
		else if(ra[i].name.indexOf("op")==0){
			ra[i].onclick=function(){
				alert("Au secours! On me dit que je viens de sélectionner le numéro " + (this.ind + 1) + "\nmais je veux bien être pendu si je me souviens à quoi ça correspond!")
			}
		}
	}
 
for(i in t){
 
	t[i].onclick=function(){
 
		if(this.name=="r"){
			if(lequel){
				lequel.style.display="none";
			}
			if(laquelle){
				laquelle.style.display="none";
			}
 
		lequel=document.getElementById("d"+this.ind);
		lequel.style.display="block";
 
		}
		else{
			if(laquelle){
				laquelle.style.display="none";				
			}
 
		laquelle=document.getElementById("d"+this.ind);
		laquelle.style.display="block";
 
		}		
	}
}
 
 
</script> 
 
</body>
</html>