[jQuery] Why do hide/show elements appear at the end?
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');
$("tr[@sub_id='"+sub_id+"']").show();
}, function() {
sub_id = $(this).attr('sub_id');
$("tr[@sub_id='"+sub_id+"']").hide();
});
Things are hiding/showing correctly but not in the places I expect. What
can I do to fix this?
Thanks!
Chris.