Question

I am having a table that will be dynamically filled the structure is like this:

<table>
<tr>
<td> The </td><td> Fields </td><td> To </td><td>Be</td><td>visible</td>
</tr>
<tr>

and the same structure 2 times but it has to be hidable on load and and click and to show when clicked

</tr>
... the other trs ...

<table>

I want the second and third tds to slide down and up when I click the first td.

Answer 1

$('table > tr > td').first().bind('click', function (event) {
    $(this).next().slideToggle().next().slideToggle();
});

Update:
Go with the following: fiddle

<table>
    <thead><!-- Clickable Header --></thead>
    <tbody>
    <tr><!-- Content --></tr>
    <tr><!-- Content --></tr>
    </tbody>
</table>

JS:

$(document).ready(function () {
    $('table tbody').css('display', 'none');
    $('table thead').click(function (event) {
        $('table tbody').slideToggle();
    });
});​