Toggle qui me pose problème

Bonjour, je souhaite mettre en place, sur une page d'annonces immobilières un toggle permettant de masquer/afficher un formulaire attaché à chaque annonce.

J'ai un script php qui affiche les annonces à partir d'une base MySql.

Ca se présente comme ça:

Code:

---

1 2 3 4 5 6 7 8

<?php while ($donnees = mysql_fetch_array($resultat) ){ <table>  <tr>    <td>.......</td>    <td>.......</td>  </tr> </table> ?>

---

La page contient 10 tables une fois chargée.

J'ai trouvé un petit script JS permettant de faire cela, mais il s'appuie sur "getElementById", le voici:

Code:

---

1 2 3 4 5 6 7 8 9

function toggle(obj) { var el = document.getElementById(obj); if ( el.style.display != 'none' ) { el.style.display = 'none'; } else { el.style.display = ''; } }

---

Le soucis, c'est qu'ainsi, je ne peux pas agir sur chaque annonce(table) tant donné qu'elles sont générées dynamiquement.

On m'a conseillé d'utiliser "getElementsByClassName", mais je ne m'en sors pas.

J'espère avoir été clair :?

Merci par avance pour votre aide.

Vous pouvez voir la page ici

Code:

---

1 2 3 4 5 6 7 8 9

<?php while ($donnees = mysql_fetch_array($resultat) ){?> <table> <tr> <td>.......</td> <td>....... <a onclick="toggle('table<?php echo $donnees['id']; ?>');" style="cursor:pointer;">Nous contacter</a></td> </tr> </table> <div id="table<?php echo $donnees['id']; ?>"><!-- ICI TON FORM --></div> <?php }?>

---

$donnees['id'] te retourne l'identifiant de ton annonce mais faut mettre d'abord toutes tes div avec le motif 'table' à display:none;

Bon courage

Merci beaucoup d-Rek! je teste ça de suite.

Qu'entends-tu par "mettre d'abord toutes tes div avec le motif 'table' à display:none;"? Comment puis-je faire cela?

Et du coup, je peux enlever ceci?:

Code:

---

1 2 3 4 5 6 7 8 9

function switchMenu(obj) { var el = document.getElementById(obj); if ( el.style.display != "none" ) { el.style.display = "none"; } else { el.style.display = ""; } }

---

En fait, c'est un <tr> que je souhaite masquer/afficher, voici le code complet:

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

<?php while ($donnees = mysql_fetch_array($resultat) ) { <table width="620" align="center" cellpadding="0" cellspacing="0"> <tr> <td width="220" height="150" align="center"> </td>   <td width="360" height="150"> </td>   <td width="40" height="150"> <a onclick="toggle('table<?php echo $donnees['no_asp']; ?>');" style="cursor: pointer;" title="Plus d'infos sur ce bien"><img src="images/plus_infos.png" title="Plus d'infos sur ce bien" alt="Plus d'infos sur ce bien" style="border: none; width: 28;" /></a> </td>   </tr>   <tr id="table<?php echo $donnees['no_asp']; ?>" style="display: none;">   <td width="620" height="80" align="left" colspan="3"> <form> </form> <td>   </tr>   <tr>   <td width="620" height="30" align="left" colspan="3"> </td>   </tr>   </table>

---

Merci pour ta patience :oops:

Non, techniquement je crois pas que c'est possible mais de toute façon, c'est pas du tout conseillé.
L'élément table doit théoriquement être utilisé pour afficher des données hiérarchisées en tableur (pense à Excel).

Tu devrais te mettre aux div, au début c'est pas facile (voire ça fait un peu mal) mais c'est comme toute les premières fois :lol:

C'est bon, j'ai trouvé la solution, j'ai gardé la fonction:

Code:

---

1 2 3 4 5 6 7 8 9

function switchMenu(obj) { var el = document.getElementById(obj); if ( el.style.display != "none" ) { el.style.display = "none"; } else { el.style.display = ""; } }

---

ensuite, le bouton qui appelle la fonction:

Code:

---

<a onclick="switchMenu('<?php echo $donnees['no_asp']; ?>');" style="cursor: pointer;">

---

"no_asp" étant l'identifiant de chaque annonce

et pour finir, le <tr> qui doit s'afficher/masquer est identifié par le même numéro (no_asp):

Code:

---

<tr id="<?php echo $donnees['no_asp']; ?>" style="display: none;">

---

Et ça fonctionne.

Merci encore pour ton aide.