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