jQuery toggled tr elements drift down page

Question

The gist of my problem is that I have a table that every even row is hidden, and visibility is toggled using an anchor on the row above. This works correctly, but in some browsers (Safari and Chrome) the tr below the one that just appeared moves down further than it should have.

If you keep toggling the hidden tr the next sibling drifts down the page.

Here is a bare bones code that shows this issue (requires jquery)

 <script type="text/javascript">
  $(function() { //document ready

   $('.details').hide();

   $('.show_hide').click(function(event){
    event.preventDefault();
    $(this).parents('tr').next().slideToggle('slow');
   });


  }); //end doc ready
 </script>

 <style>
  table {
   width: 500px;
  }

  .main td {
   width: 33%;
  }
 </style>

 <table>
  <tr class="main">
   <td>Title</td>
   <td>Some Detail</td>
   <td><a href="#" class="show_hide">Show/Hide</a></td>
  </tr>

  <tr class="details">
   <td>
    Sed scelerisque, tellus non auctor pretium, felis massa vehicula sem, quis vehicula nulla dolor eget justo. Pellentesque porttitor aliquet metus a accumsan. Aenean luctus, lacus in tristique imperdiet, nulla ipsum dignissim massa, quis laoreet eros justo eu nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sed purus nisi, at venenatis tellus. Praesent id magna ac dui congue convallis. Duis sit amet arcu eu ipsum tincidunt fermentum. Praesent mollis, eros sit amet auctor iaculis, mi elit aliquet elit, at rhoncus elit urna nec magna. Vestibulum iaculis fringilla diam, in rhoncus tortor blandit id. Nam id leo eros, et posuere massa. Morbi fermentum egestas nisl, et pharetra urna convallis viverra. Maecenas id massa nulla. Pellentesque eget urna vel diam interdum sollicitudin sit amet in massa.
   </td>
  </tr>

  <tr class="main">
   <td>Title 2</td>
   <td>Some Detail 2</td>
   <td><a href="#" class="show_hide">Show/Hide</a></td>
  </tr>

  <tr class="details">
   <td>
    Sed scelerisque, tellus non auctor pretium, felis massa vehicula sem, quis vehicula nulla dolor eget justo. Pellentesque porttitor aliquet metus a accumsan. Aenean luctus, lacus in tristique imperdiet, nulla ipsum dignissim massa, quis laoreet eros justo eu nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sed purus nisi, at venenatis tellus. Praesent id magna ac dui congue convallis. Duis sit amet arcu eu ipsum tincidunt fermentum. Praesent mollis, eros sit amet auctor iaculis, mi elit aliquet elit, at rhoncus elit urna nec magna. Vestibulum iaculis fringilla diam, in rhoncus tortor blandit id. Nam id leo eros, et posuere massa. Morbi fermentum egestas nisl, et pharetra urna convallis viverra. Maecenas id massa nulla. Pellentesque eget urna vel diam interdum sollicitudin sit amet in massa.
   </td>
  </tr>
 </table>

The above code seems to work fine in Opera and Firefox, but the issue mentioned above happens in Safari and Chrome. (Haven't tested in IE yet). This makes me suspicious that it is a webkit related issue.

Anyone else found the problem? Is there a workaround?

Answer 1

I'm able to reproduce your problem in Chrome with jQuery 1.4.2, but not with 1.4.4. In fact, with 1.4.4, the table row doesn't animate at all -- instead it just toggles on and off (after a delay).

The behavior of slideToggle on table elements seems to be somewhat undefined. As a workaround, place a <div> around your <td> contents and call slideToggle on that instead:

<tr>
    <td colspan="3">
        <div class="details">
            Sed scelerisque...
        </div>
    </td>
</tr>