Question

 <table>
    <tr class="clicke">
        <td colspan="2">
            <img src="images/title_.gif" vspace="0" hspace="0" width="690" height="65"
            border="0" alt="" />
        </td>
    </tr>
    <tr class="tbl_even">
        <td class="required">Name (First, Middle Initial, Last)</td>
        <td>
            <input type="text" name="realname" />
        </td>
    </tr>
    <tr class="tbl_odd">
        <td>Birth Date</td>
        <td>
            <input type="text" name="Birth Date" />
        </td>
    </tr>
    <tr class="clicke">
        <td colspan="2">
            <img src="images/informati.gif" vspace="0" hspace="0" width="690" height="65"
            border="0" alt="" />
        </td>
    </tr>
    <tr class="tbl_odd">
        <td>Present Address</td>
        <td>
            <input type="text" name="Present Address" style="width:250px;" />
        </td>
    </tr>
    <tr class="tbl_even">
        <td class="required">City</td>
        <td>
            <input type="text" name="City" value="credit-application.php" />
        </td>
    </tr>
</table>

when click the clicke class tr, the following tr will hide with slow up untill the next clicke tr. when click again, the following tr content will show with slow down.

my code:

$(document).ready(function(){
    $(".clicke").click(function(){
        $("tr").slideToggle("slow");
    }

    );
  });

but all the tr are effect, which are not i want, how to determine the related tr content. thank you

i am sorry maybe i didn’t say the question clear.
eg:

<tr class="clicke">

        </tr>


click the tr. those tr will be show/hide



<tr class="tbl_even">
            <td class="required">Name (First, Middle Initial, Last)</td>
            <td>
                <input type="text" name="realname" />
            </td>
        </tr>
        <tr class="tbl_odd">
            <td>Birth Date</td>
            <td>
                <input type="text" name="Birth Date" />
            </td>
        </tr>

Answer 1

EDIT: I see you’ve updated your question to make your intent clearer. I think the best way to achieve what you want is to group the form fields in one element, and toggle that element.

I think this is preferable to animating multiple table rows simultaneously, since I assume your goal is to animate all the associated fields at once, in a single animation.

Here’s how you might do that:

<h2 class="clicke">CLICK ME #1</h2>
<table>
    <tr class="tbl_even">
      <td class="required">Name (First, Middle Initial, Last)</td>
      <td><input type="text" name="realname" /></td>
    </tr>
    <tr class="tbl_odd">
      <td>Birth Date</td>
      <td><input type="text" name="Birth Date" /></td>
    </tr>
</table>

<h2 class="clicke">CLICK ME #2</h2>
<table>
    <tr class="tbl_odd">
      <td>Present Address</td>
      <td><input type="text" name="Present Address" /></td>
    </tr>
    <tr class="tbl_even">
      <td class="required">City</td>
      <td><input type="text" name="City" /></td>
    </tr>
</table>​​​

jQuery:

$(document).ready(function(){
    $('.clicke').next('table').hide();
    $('.clicke').click(function(){
        $(this).next('table').slideToggle('slow');
    });
});​

Here is a demo: http://jsfiddle.net/ZvFQm/1/