Discussion :

[fazpedro]

Bonjour,

je souhaite ouvrir au clic un DIV caché, mais dans une liste de plusieurs DIV avec un ID différent à chaque DIV.
on affiche bien le bon ID avec l'alerte mais le DIV ne s'ouvre pas

Merci d'avance.

Jquery :

Code :

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

1
2
3
4
5
6
7
8
9
10
<script type="text/javascript">
$(document).ready(function() {
$(".info_affiche").click(function(){
	var this_id;
	this_id = this.id;
	alert("#plus_infos"+this_id); //  OK this_id = #plus_infosaffiche_infos1 ou plus_infosaffiche_infos2 sur le deuxième 
	$("#plus_infosaffiche_infos"+this_id).show();
});
});
</script>

HTML :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
.info_detail{display:none;}
</style>
<a class="info_affiche" href="#" id="affiche_infos1">TEST DE DIV 1</a>
<div class="info_detail" id="plus_infosaffiche_infos1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec venenatis enim id vestibulum rhoncus.
Fusce leo orci, hendrerit vel nulla et, laoreet varius lorem. Curabitur tincidunt condimentum nibh vitae egestas.
</div>							
<a class="info_affiche" href="#"id="affiche_infos2">TEST DE DIV 2</a>
<div class="info_detail" id="plus_infosaffiche_infos2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec venenatis enim id vestibulum rhoncus.
Fusce leo orci, hendrerit vel nulla et, laoreet varius lorem. Curabitur tincidunt condimentum nibh vitae egestas.
</div>

[Toufik83]

tu peux le faire en deux lignes et SANS L'UTILISATION DES ID

Code :

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

1
2
3
4
5
6
7
 
$(document).ready(function() {
$(".info_affiche").click(function(){
	var index=$(this).index(".info_affiche");//index de <a> sur lequel on a cliqué, par rapport a la classe ".info_affiche" .
  $(".info_detail").eq(index).show();//affichage de la div ayant la classe ".info_detail" en utilisant index.
});
});

[fazpedro]

Excellent Toufik83
Merci beaucoup, cela fonctionne bien !

J'en ai profité pour rajouter un code de fermeture du DIV...

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
<script type="text/javascript">
$(document).ready(function() {
$(".info_affiche").click(function(){
	var index=$(this).index(".info_affiche");	//index de <a> sur lequel on a cliqué, par rapport a la classe ".info_affiche" .
	$(".info_detail").eq(index).show();			//affichage de la div ayant la classe ".info_detail" en utilisant index.
	});
 
	$(".masque_infos").click(function(){ // pour masquer le DIV
	var index=$(this).index(".masque_infos");	//index de <a> sur lequel on a cliqué, par rapport a la classe ".info_affiche" .
	$(".info_detail").eq(index).hide();			//affichage de la div ayant la classe ".info_detail" en utilisant index.
	});
});
</script>
<style>
.info_detail{display:none;}
</style>
<a class="info_affiche" href="#" id="affiche_infos1">TEST DE DIV 1</a>
<div class="info_detail" id="plus_infosaffiche_infos1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec venenatis enim id vestibulum rhoncus.
Fusce leo orci, hendrerit vel nulla et, laoreet varius lorem. Curabitur tincidunt condimentum nibh vitae egestas.
<a class="masque_infos" href="#" id="masque_infos1"> Fermer le DIV 1 </a>
</div>							
<a class="info_affiche" href="#"id="affiche_infos2">TEST DE DIV 2</a>
<div class="info_detail" id="plus_infosaffiche_infos2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec venenatis enim id vestibulum rhoncus.
Fusce leo orci, hendrerit vel nulla et, laoreet varius lorem. Curabitur tincidunt condimentum nibh vitae egestas.
<a class="masque_infos" href="#" id="masque_infos2">  Fermer le DIV 2 </a>
</div>

[Toufik83]

profite un peu des fonctions de jQuery, il existe $.slideToggle().
au lieu de .show() et .hide(), tu peux directement faire comme suite :

Code :

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

1
2
3
4
5
 
$(".info_affiche").click(function(){
	var index=$(this).index(".info_affiche");	
       $(".info_detail").eq(index).slideToggle();
	});

jQuery est très gentil