I have a table with a thead and tbody sections. I have applied a slideToggle on this successfully, but the animation is broken.

When a user clicks on the thead, I want the contents of the tbody to slide up. Currently what happens is the section simply disappears, without any animation.

Here is the table

<table>
  <thead>
    <tr>
      <td colspan="3">TABLE HEADING</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="first" colspan="1">Cell Contents</td>
      <td colspan="1">Cell Contents</td>
      <td colspan="1">Cell Contents</td>
    </tr>
  </tbody>
</table>

And here is the jQuery I am using:

   <script type="text/javascript" language="javascript">
      $(document).ready(function () {
         $("thead").click(function () {
               $(this).next("tbody").slideToggle("slow");
            }
         )
      });
   </script>
Edit
Report