[jQuery] Why do hide/show elements appear at the end?

[Chris W. Parker]

Hello,
 
I am hiding/showing a <tr> that appears (in the HTML) immediately after
the <tr> that contains the control but when it is shown it appears at
the end of the table (along with the other <tr>s that I'm doing the same
thing to).
 
HTML:
 
<table>
 <tr>
  <td><span class="sub_events" sub_id="2">hide/show control</span></td>
 </tr>
 <tr class="sub_events" sub_id="2">
  <td>here I am!</td>
 </tr>
 <tr>
  <td><span class="sub_events" sub_id="3">hide/show control</span></td>
 </tr>
 <tr class="sub_events" sub_id="3">
  <td>here I am!</td>
 </tr>
</table>
 
Visual:
 
hide/show control
hide/show control
here I am!
here I am!
 
I would expect it to look like this:
 
hide/show control
here I am!
hide/show control
here I am!
 
Here's my relevant jQuery code:
 
 // fold and unfold subordinates' event tables
 $('tr.sub_events').hide();
 $('span.sub_events').toggle(function () {
  sub_id = $(this).attr('sub_id');
  $("[EMAIL PROTECTED]'"+sub_id+"']").show();
 }, function() {
  sub_id = $(this).attr('sub_id');
  $("[EMAIL PROTECTED]'"+sub_id+"']").hide();
 });


Things are hiding/showing correctly but not in the places I expect. What
can I do to fix this?


Thanks!
Chris.