Discussion :

[tidou95220]

Bonjour,

J'aimerai cacher et afficher indépendamment des div mais j'ai un petit soucis, comment faire ? pour le moment j'affiche et je cache toutes mes div

JS

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type="text/javascript">
 
$(document).ready(function(){
 
        $(".slidingDiv").hide();
        $(".show_hide").show();
 
    $('.show_hide').click(function(){
    $(".slidingDiv").slideToggle();
    });
 
});
 
</script>

Mon déclencheur dans le HTML

Code :

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

1
2
 
<a href="#" class="show_hide" id="<?php echo $x; ?>" onClick="reply_click(this.id)"><?php echo $tabDesc5[$j]; ?></a>

Mes div générés à la volé

Code :

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

<div class='slidingDiv' style='display:none;'>BLABLABLA</div>

Merci :s je suis debutant...

EDIT :
Il faut que je crée une variable qui boucle pour chaque ID oui ! mais ensuite ? :s
le

Code :

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

onClick="reply_click(this.id)"

n'est pas utilisé dans mon javascript c'etait des tests ...

[Atomya Rise]

Si j'ai bien compris ta demande, tu souhaites pouvoir ouvrir et fermer des div indépendamment mais sans avoir à écrire toutes les tes div dans le code javascript...

voici une manière simple :

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
$(document).ready(function() {
 
	$(".show_hide").click(
		function() {
			// On récupère le numéro présent dans l'id du lien
			var idLien = $(this).attr("id").substring(4);
 
			$("#div"+idLien).slideToggle();
		}
	);
 
});

Et le code html

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
<a href="#" class="show_hide" id="lien1">Lien 1</a>
<div class='slidingDiv' id="div1" style='display:none;'>BLABLABLA 111</div>
 
<br /><br />
 
<a href="#" class="show_hide" id="lien2">Lien 2</a>
<div class='slidingDiv' id="div2" style='display:none;'>BLABLABLA 222</div>
 
<br /><br />
 
<a href="#" class="show_hide" id="lien3">Lien 3</a>
<div class='slidingDiv' id="div3" style='display:none;'>BLABLABLA 333</div>

Explication de:

Code javascript :

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

var idLien = $(this).attr("id").substring(4);

On récupère l'id du lien à partir du 4éme caractère.. donc, exemple, si tu veux que ton id soit par exemple tototata10, pour récupérer le 10 tu feras un substring(8)

[tidou95220]

Je vais essayer ça ^^merci pour la réponse

[tidou95220]

C'est parfait Grand merci

[tidou95220]

Juste un petit truc étrange !

Code :

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

<div id="div2" class="slidingDiv" style="display: block;">

j'ai 2 div id="div2" dans mon code et quand je click sur le déclencheur il me toogle juste la premiere div2 alors qu'elles ont le meme ID .... hum

je voudrai que les 2 div "div2" toogle en meme tps

[tidou95220]

Impossible de mettre 2 ID identique pour la javascript... il pren automatiquement le 1er

que faire ..

[Zoulouseb]

bonjour,

merci a vous votre poste m'a bien aidé par contre comment faire pour que lorsque l'on clique sur un lien les autres se ferme ??