Question

I’m not sure why this isn’t working…

HTML

<table>
<tr>
  <th>Name</th>
  <th>Options</th>
</tr>
<?php // loop over items
while ($row = mysql_fetch_assoc($qry)){ ?>
  <tr>
    <td><?=$row['name'];?></td>
    <td<a href="#" class="trigger">Detail</a></td>
  </tr>
  <tr>
    <td colspan="100%" class="details">
    stuff
    </td>
  </tr>
  <?php
} ?>
</table>

Then the jQuery I’m using is…

$(document).ready(function () {  
  $('.trigger').click(function() {
    $(this).parents("table").siblings(".details").slideToggle();
    // also tried this...
    // $(this).parents("table").nextAll(".details").slideToggle();
    return false;
  });
});  

I’ve tried moving the details class to the TR. What I’d like is when someone clicks the “Detail” link the following TR should toggle. I’ve put an ID on the top table and alerted attr(‘id’) of parent and that works. Changing “.siblings” to “.find” toggles them all.

Thanks for any help.

Answer 1

your html is malformed
and your jquery is not doing selecting the right item… you go up to the table element, and then try a sibbling but that results in nothing.

try this html:

<table>
<tr>
  <th>Name</th>
  <th>Options</th>
</tr>
<?php // loop over items
while ($row = mysql_fetch_assoc($qry)){ ?>
  <tr>
    <td><?=$row['name'];?></td>
    <td><a href="#" class="trigger">Detail</a></td>
  </tr>
  <tr class="details">
    <td colspan="2">
    stuff
    </td>
  </tr>
  <?php
} ?>
</table>

and this jquery:

$(function(){
  $('.trigger').click(function() {
    $(this).parents("tr").next().slideToggle();
    return false;
  });
});

working example:
http://jsfiddle.net/saelfaer/Z6MzS/

edit
just to mention what i changed

you had a <td> open tag which was missing its >, also, i moved the class="details" to the <tr> element that is to be shown / hidden.

in the jquery i changed your selector going up to the table, into going up to the table row and selected the .next() table row (which is actually the one that needs to be shown or hidden. then toggled that one.

improvements you can make:
hide the tr.details trough css at first

tr.details {
  display: none;
}