Afficher ou masquer des <div>

Version imprimable

Bonjour à tous,

Je débute en javascript et me voilà confronter à un problème.
Je souhaite afficher ou masquer plusieurs zone de texte en les "switchant"
C'est à dire : par défaut ej vois la 1.
Si je clique sur la 2 la 1 s'efface et la 2 apparait.
Si je reclique sur la 1, la 2 s'efface et la 1 réapparait.

J'ai ce code qui me permet d'afficher ou masquer les zones mais je n'arrive pas à l'adapter.
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 <script> function visibilite(thingId,txtAff,txtMasque) { var targetElement; var targetElementLink; targetElement = document.getElementById(thingId) ; targetElementLink = document.getElementById(thingId+'Link'); if (targetElement.style.display == "none") { targetElement.style.display = "" ; targetElementLink.innerHTML = txtMasque ; } else { targetElement.style.display = "none" ; targetElementLink.innerHTML = txtAff ; } } </script> <a href="javascript:visibilite('Div1','Afficher la zone 1','Masquer la zone 1');" id="Div1Link">Afficher la zone 1</a> <a href="javascript:visibilite('Div2','...ou la zone 2','Masquer la zone 2');" id="Div2Link">...ou la zone 2</a> <br /> <div id="Div1" style="display:none;">contenu1</div> <div id="Div2" style="display:none;">contenu2</div>
Voilà merci d'avance de votre aide !

@ bientôt.

ce script ci sera sans doute plus facile à adapter ...

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
<script>
 
function visibilite(obj)
 {
  var div1=document.getElementById('Div1');
  var div2=document.getElementById('Div2');
 
	switch (obj) {
	              case ('Div1') : 	document.getElementById('Div2').style.display='none';
	              					document.getElementById('Div1').style.display='block';
	              					break;
	              case ('Div2') : 	document.getElementById('Div1').style.display='none';
	              					document.getElementById('Div2').style.display='block';
	              					break;
	}
	}
</script>
 
 <body>
 
<a href="javascript:visibilite('Div1');" id="Div1Link">Afficher la zone 1</a>
 
<a href="javascript:visibilite('Div2');" id="Div2Link">...ou la zone 2</a>
 
<br />
<div id="Div1" style="display:block;">contenu1</div>
<div id="Div2" style="display:none;">contenu2</div>
 
</html>

voila :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Document sans nom</title>
<script type="text/javascript">
function visibilite(thingId,txtAff,txtMasque,DivToHide)
	{
	var targetElement; var targetElementLink;
	targetElement = document.getElementById(thingId) ;
	targetElementLink = document.getElementById(thingId+'Link');
	target2 = document.getElementById(DivToHide) ;
 
	if (targetElement.style.display == "none")
		{
		targetElement.style.display = "" ;
		targetElementLink.innerHTML = txtMasque ;
		target2.style.display = "none" ;
		} 
	else 
		{
		targetElement.style.display = "none" ;
		targetElementLink.innerHTML = txtAff ;
		target2.style.display = "" ;
		}
	}
</script>
</head>
 
<body>
<a href="javascript:visibilite('Div1','Afficher la zone 1','Masquer la zone 1','Div2');" id="Div1Link">Afficher la zone 1</a>
 
<a href="javascript:visibilite('Div2','...ou la zone 2','Masquer la zone 2','Div1');" id="Div2Link">...ou la zone 2</a>
 
<br />
<div id="Div1" style="display:none;">contenu1</div>
<div id="Div2" style="display:none;">contenu2</div>
</body>
</html>

Il ne te reste plus qu'a gèrer les libellés

15/01/2008, 11h43
dam28800

Merci beaucoup cela fonctionne.

Je regarde pour modifier els libellé et adapter mon code.

Merci encore.