bloc qui s'ouvre et ferme un autre

Version imprimable

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:

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

essais cette exemple qui peut etre te guidera

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

04/04/2011, 18h51
laurentche

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.

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:

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'; }

il faut maintenant ne passer en paramètre QUE le numéro devant être ouvert
exemple
Code:

1 2 // affichera id="paragraphe1" <h5 id="titre1" onclick="affichePara(1)";>LIEN1.</h5>
pendant que l'on y est pas bien de mettre des DIV dans des H6, mets plutôt des DIV, c'est plus clean
le ID doivent être UNIQUE
par exemple
Code:

1 2 3 4 5 6 7 8 9 10 <h5 id="titre1" onclick="affichePara(1)";>LIEN1.</h5> <div id="paragraphe1" style="display:none;"> Paragraphe 1 <br>Ligne 2 </div> <h5 id="titre2" onclick="affichePara(2)";>LIEN2</h5> <div id="paragraphe2" style="display:none;"> Paragraphe 2 <br>Ligne 2 </div>

05/04/2011, 11h03
laurentche

Je viens de trouver mais merci de m avoir repondu et cela fonctionne bien. je te remercie grandement :-)
Juste un petit bug chez ie qui reduit l espace entre les liens ( entre les hauteurs) lorsque je clic sur le lien du haut puis ensuite sur le lien le plus en bas.
Un grand merci à vous deux car du coup votre solution etait la bonne!!
05/04/2011, 11h21
NoSmoking

il peut toujours être intéressant que tu mettes ta solution, pour d'autres visiteurs ayant le même soucis.
05/04/2011, 11h27
laurentche

ta solution est la bonne, je n avais pas compris comment enumerer les id et en cherchant cela est venu et tu me l as donne en meme temps.
par contre le petit bug avec ie je cherche.
merci en tout cas c est sympa. Pas facile des fois et j essaye de changer de specialite pour le web :dur dur !!! :-)
05/04/2011, 11h34
NoSmoking

Citation:

Envoyé par laurentche

par contre le petit bug avec ie je cherche.

mais si je ne vois pas le soucis, je pense qu'avec du CSS bien fait ce problème devrait disparaître..

un deuxieme code sa fera pas de mal celui ci n'utilise pas d'id il faut juste mettre la meme class pour chaque div conteneur dans l'exemple (dg) c'est moins prise de tete au niveau mise en place et maintenance

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
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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
 
<!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 para(lui){
 
var elem=lui
 
while(elem.className!="dg") {
elem=elem.nextSibling
}
 
if(elem.style.display == 'block'){
elem.style.display = 'none';
return false
}
 
var allElements = lui.parentNode.getElementsByTagName('h6');
for (var i = 0; i < allElements.length; i++){
 
if(allElements[i].parentNode.style.display == 'block'){
 
allElements[i].parentNode.style.display = 'none';
}
}
elem.style.display = 'block';
}
 
</script>
</head>
<body>
 
<div>
 
<h5 onclick="para(this)";>LIEN1.</h5>
<div class="dg"  style="display:none;">
<h6>
<p>BLABLA.</p>
- BLABLA.<br/><br/>
</h6>
</div>
 
 
<h5 onclick="para(this)";>LIEN2</h5>
<div class="dg"  style="display:none;">
<h6>
<p>BLABLA</p>
- BLABLA.<br/><br/>
- BLABLAbr/><br/>
- BLABLA.<br/><br/>
- BLABLA<br/><br/>
</h6>
</div>
 
<h5 onclick="para(this)";>LIEN3</h5>
<div class="dg"  style="display:none;">
<h6>
<p>BLABLA</p>
- BLABLA.<br/><br/>
- BLABLA<br/><br/>
- BLABLA.<br/><br/>
- BLABLA<br/><br/>
</h6>
</div>
 
<h5 onclick="para(this)";>LIEN4</h5>
<div class="dg"  style="display:none;">
<h6>
<p>BLeBLe</p>
- BLeBLe.<br/><br/>
- BLiBLi<br/><br/>
- <br/><br/>
- BLABLA<br/><br/>
</h6>
</div>
		</div>
	</body>
</html>

13/12/2011, 08h03
tryan

Bonjour,

Je déterre ce topic...

@NoSmoking : que faut il ajouter à votre fonction pour que le lien cliqué qui ouvre le div concerné utilise une class css?
Par exemple on active "affichePara(2)" et la couleur de fond du lien indique que l'on se trouve sur ce lien.

Merci