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