hide/show plusieurs div

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:

---

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:

---

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:

---

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

---

Merci :s je suis debutant...:roll:

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

Code:

---

onClick="reply_click(this.id)"

---

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

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:

---

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:

---

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:

---

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)

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

C'est parfait :) Grand merci

Juste un petit truc étrange !

Code:

---

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

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

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

que faire ..

Bonjour,
voici un code qui permet de s'affranchir des id (ou de se rafraichir les idées ?) :

Code:

---

1 2 3 4 5

$(document).ready(function(){ $(".show_hide").click(function() { $(this).next(".slidingDiv:first").slideToggle(); }); });

---

Explication :
on "slideToggle" le premier (:first) élément de class="slidingDiv" juste après (.next) l'élément de class="show_hide" qu'on vient de cliquer (.click)

PS : un id="..." doit TOUJOURS être UNIQUE.

cela ne fonctionne pas ac moi :s
http://img593.imageshack.us/img593/7674/espagnee.png
dans automobile je devrai avoir d'affiché :
Immatriculations d'automobile diesel et Immatriculations d'automobile essence....
mes 2 div sont nommé slidingDiv

Code:

---

<div class='slidingDiv'>

---

L'image n'apporte rien. C'est le code qu'il faut voir !

Il te suffit de faire la même chose, mais avec des class... Normalement, cela fonctionnera. Le seul truc en plus à faire, c'est de récupérer la position de la classe.

Par contre, petite note, que ce soit en javascript ou autre, dans une seule et même page, il n'est pas convenable de mettre 2 fois le même id. Un ID est unique

mon javascript

Code:

---

1 2 3 4 5 6 7 8 9 10

<script type="text/javascript">   $(document).ready(function() {   $(".show_hide").click(function() { $(this).next(".slidingDiv:first").slideToggle(); });   }); </script>

---

mon déclencheur

Code:

---

<a href="#lien<?php echo $x; ?>" class="show_hide" ><?php echo $tabDesc5[$j]; ?></a>

---

mes div's

Code:

---

1 2	<div class="slidingDiv" style="display: block;">blabla</div> <div class="slidingDiv">blalbla2</div>

---

Merci :)

puisque un ID doit être unique, il faut agir sur la class de la div et non sur l'id de la div...

comme ceci :

Code:

---

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(); } );   });

---

Code:

---

1 2 3 4 5 6 7 8 9 10 11

<a href="#" class="show_hide" id="lien1">Lien 1</a> <div class='div1' style='display:none;'>BLABLABLA 111</div>   <br /><br />   <div class='div1' style='display:none;'>BLABLABLA 222</div>   <br /><br />   <a href="#" class="show_hide" id="lien2">Lien 3</a> <div class='div2' style='display:none;'>BLABLABLA 333</div>

---

Ainsi, tu peux mettre à ta première et deuxième div, la même class, est donc, les 2 s’ouvriront en même temps...

OO merci :) c'est parfait !!! c'est pas évident pour un débutant....

J'aimerai savoir comment rajouter un autre paramétre avec ce script en faite j'aimerai qu'un bouton independant face ouvrir une div deja mise avec un autre element

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

<div id="nav_general"> <li> <a href="#" class="show_hide" id="lien1"><img src="images/eco-habitation.png" alt="eco-habitation" /> </a> <div class='div1' style='display:none;'><div id="description_nord"> <div id="diapob"><img src="images/bruno.jpg" alt="bruno" /> </div> <div id="textedescription"> <span class="titre">FRANCE-PARIS</span><br /> <span class="soustitre">xoxooxoxoox</span><br /> <span class="texte">xoxooxoxoxo</span></div></div>   <div class='div1' style='display:none;'><div id="description_burkina"> <div id="diapob"><img src="images/bruno.jpg" alt="bruno" /> </div> <div id="textedescription"> <span class="titre">xoxoxox</span><br /> <span class="soustitre">xooxooxox</span><br /> <span class="texte">xoxooxoxoxox</span></div> </div> </li> <li></li> <li></li> </ul> </div>     <div id="burkina"> <a href="#" class="show_hide" id="lien1"><img src="images/eco-habitation_p.png" /></a> <div class='div1' style='display:none;'> </div> </div>

---

Je n'arrive pas à rendre le clic sur burkina indepandant.
Merci par avance

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