bloc qui s'ouvre et ferme un autre [Résolu]

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

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

NoSmoking · 05/04/2011, 10h47

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

Code :

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

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

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

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>

laurentche · 05/04/2011, 11h03

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

NoSmoking · 05/04/2011, 11h21

il peut toujours être intéressant que tu mettes ta solution, pour d'autres visiteurs ayant le même soucis.

laurentche · 05/04/2011, 11h27

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

NoSmoking · 05/04/2011, 11h34

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

mekal · 05/04/2011, 14h12

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 :

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

tryan · 13/12/2011, 08h03

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

04/04/2011, 18h51	#3
laurentche Invité de passage Inscription : mars 2009 Messages : 11 Détails du profil Informations forums : Inscription : mars 2009 Messages : 11 Points : 3 Points : 3	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.
	00

05/04/2011, 11h03	#6
laurentche Invité de passage Inscription : mars 2009 Messages : 11 Détails du profil Informations forums : Inscription : mars 2009 Messages : 11 Points : 3 Points : 3	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!!
	00

05/04/2011, 11h21	#7
NoSmoking Modérateur Inscription : janvier 2011 Messages : 2 933 Détails du profil Informations personnelles : Sexe : Localisation : France, Isère (Rhône Alpes) Informations forums : Inscription : janvier 2011 Messages : 2 933 Points : 4 756 Points : 4 756	il peut toujours être intéressant que tu mettes ta solution, pour d'autres visiteurs ayant le même soucis.
	00

05/04/2011, 11h27	#8
laurentche Invité de passage Inscription : mars 2009 Messages : 11 Détails du profil Informations forums : Inscription : mars 2009 Messages : 11 Points : 3 Points : 3	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 !!! :-)
	00

13/12/2011, 08h03	#11
tryan Candidat au titre de Membre du Club Inscription : septembre 2010 Messages : 75 Détails du profil Informations forums : Inscription : septembre 2010 Messages : 75 Points : 10 Points : 10	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 __________________ Petites annonces gratuites en France et Dom/Tom pour particuliers et professionnelles
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email