Hi folks. I'm following this tutorial: http://www.javascripttoolbox.com/jquery/
And I'm trying to get table rows that are populated by mySQL to expand to show the details. What's strange is firebug shows the rows as hidden (greyed out), and when I click the above row, the rows get un-greyed out. The problem is that they are not actually being hidden on the screen. When I click on the "parent" row, I can see a shift down of the row by a couple px, but that's it.
Here's my table:
<?php
while($row = mysql_fetch_array($result)){
?>
<tr class="parent" id="<?php echo $row['id'] ?>">
<td><?php echo $row['type'] ?></td>
<td><?php echo $row['description'] ?></td>
<td><?php echo $row['recorded_date'] ?></td>
<td><?php echo $row['added_date'] ?></td>
</tr>
<br />
<tr style="display: none;" class="child-<?php echo $row['id'] ?>"></tr>
<td> </td>
<td>2007-01-02</td>
<td>A short description</td>
<td>15</td>
</tr>
<br />
<?php
}
mysql_close();
?>
</table>
And the jQuery (above the tag):
$(function() {
$('tr.parent')
.css("cursor","pointer")
.attr("title","Click to expand/collapse")
.click(function(){
$(this).siblings('.child-'+this.id).toggle();
});
$('tr[@class^=child-]').hide().children('td');
});