Question

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>&nbsp;</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');
});

Answer 1

Remove the </tr> at the end of this line:

<tr style="display: none;" class="child-<?php echo $row['id'] ?>"></tr> 

Your “child-id#” row contains no cells. Hence the slight shift when clicked. The </tr> at the end is not closing off any tag and is just extra.

The line breaks between table rows can be removed. They are redundant (and improper HTML). The <tr></tr> tags will automatically start on a new line.