bloc qui s'ouvre et ferme un autre

**laurentche** · 04/04/2011, 17h47

bonjour,

J'utilise des liens qui lorsque je clique dessus fait apparaitre un texte.Le probleme est que je n arrive pas à creer le systeme qui ferme un bloc lorsque je clique sur le lien du dessous ou autre.

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
 
function affichePara(para)
		{
			if(document.getElementById(para).style.display == 'none')
				document.getElementById(para).style.display = 'block';
			else
				document.getElementById(para).style.display = 'none';
}
</script>
 
<div id="conteneur">
<div id="haut2"><h1>titre</h1>
<ul>
<li><a href="index.html" accesskey="1">- bt1 -</a></li>
<li><a href="">- bt2 -</a></li>
<li><a href="">- bt3 -</a></li>
<li><a href="">- bt4-</a></li>
</ul>
 
</div>
<div id="cv1">
<div class="titre"><h4>lien1</h4></div>
<h5 id="titre1"  onclick="affichePara('paragraphe1')";>LIEN1.</h5>
<h6 id="paragraphe1" style="display:none;"><div class="bordure"> <p>BLABLA.</p>
- BLABLA.<br/><br/></div></h6>
<h5 id="titre1"  onclick="affichePara('paragraphe2')";>LIEN2</h5>
<h6 id="paragraphe2" style="display: none;"><div class="bordure"><p>BLABLA</p>
- BLABLA.<br/><br/>
- BLABLAbr/><br/>
- BLABLA.<br/><br/>
- BLABLA<br/><br/></div></h6>

Si quelqu'un peut m orienter
merci d avance

Invité · 04/04/2011, 18h33

essais cette exemple qui peut etre te guidera

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
 
<!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"/>
 
<script type="text/javascript">
 
function azerty(lui){
 
var allElements = document.getElementById("container").getElementsByTagName('div');
for (var i = 0; i < allElements.length; i++){
 
if(allElements[i].style.display == 'none'){
allElements[i].style.display = 'block';
}
}
lui.style.display = 'none';
}
 
</script>
</head>
<body>
	<div id='container'>
		<div onclick="azerty(this)">
		blablablablablablbalba	
		</div>
		<br>
		<div onclick="azerty(this)">
		bloblobloblonlo
		</div>
		<br>
		<div onclick="azerty(this)">
		blibliblibliblbibl
		</div>
		<br>
		<div onclick="azerty(this)">
		blublublublublu
		</div>
		<br>
		<div onclick="azerty(this)">
		bleblebleblebleble
		</div>
		</div>
	</body>
</html>

**laurentche** · 04/04/2011, 18h51

Merci mais cela ne semble pas fonctionne pour moi.
j aurai aimé ne pas trop m eloigner de mon exemple afin de mieux comprendre ( debutant en javascript), si biensur cela est possible.

**NoSmoking** · 04/04/2011, 20h22

Bonsoir,
il te faut utiliser une boucle mais avant
nommes toutes les divs devant apparaître/disparaitre de la même façon en les indexant, comme tu as commencé à la faire
paragraphe1, paragraphe2, paragraphe3 etc...

lors de l'appel de la fonction, tu masques toutes les DIVs et tu affiches celle dont le numéro est en paramètre, par exemple un grand classique

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
function affichePara( num){
  var i = 1;               // debut numerotation
  var sId = 'paragraphe';  // radical ID
  var oDiv;
  // masque tout
  while(( oDiv = document.getElementById( sId + (i++)))){
    oDiv.style.display = 'none';
  }
  // affiche concerne
  oDiv = document.getElementById( sId + num);
  oDiv.style.display = 'block';
}

bloc qui s'ouvre et ferme un autre

JavaScript

Vue hybride

Discussions similaires

Partager

Partager