Afficher ou masquer des <div>

**dam28800** · 15/01/2008, 11h21

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 :

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

**SpaceFrog** · 15/01/2008, 11h29

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

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

**le_chomeur** · 15/01/2008, 11h31

voila :

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

**dam28800** · 15/01/2008, 11h43

Merci beaucoup cela fonctionne.

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

Merci encore.

Afficher ou masquer des <div>

JavaScript

Discussions similaires

Partager

Partager