Question

Why this two functions have the strange behaviour of when I click on thead, the tbody expands and then collapse.

On the second function could do some testing adding alerts to the if, else statement but it only gets into the if statement so it would only slideUP.

Another thing I notice is that when there is only one row in tbody it works fine. Why?

I have also tried to add return false, and nothing, the function it is not called twice or on any other place.

I would appreciate if I could get some fix for this.

Thanks.

Function 1
$(function() {
    $("table.section thead").click(function() {
    $(this).next("table.section tbody").slideToggle("slow");

    });
});

Function 2
$(function() {
    $("table.section thead").click(function() {
      var body = $(this).next("table.section tbody");
      if (body.is(":visible"))
         body.slideUp("slow");
      else
         body.slideDown("slow");
    });
});

UPDATE
Table

<table>
<thead>
<tr><td>heading></td></tr>
</thead>
<tbody>
<tr><td>content1</td></tr>
<tr><td>content2</td></tr>
</tbody>
</table>

Answer 1

I looked at the jQuery mailing lists, this is highly browser dependent since they treat tables and how they block completely differently. Instead I’d try to have the head in a different element and slide the whole table, or instead, fade the body, something like this:

$(function() {
  $("table.section thead").click(function() {
    $(this).next("tbody").animate({opacity: 'toggle'});
  });
});

Dynamically adjusting the dimensions on individual table components and having it be cross-browser correctly seems to be not worth it to fix in he jQuery framework, so I wouldn’t expect this to change any time soon.