title: using jQuery toggle function on a table row makes table itself grow
body: <p>I'm using the jQuery toggle effect hooked to the click() event of 1 table row to toggle the visibility of the next row (which also happens to be the final row in the table).  If I click the firing row multiple times in succession, the table that contains the 2 rows grows a little every time the toggling row shows.</p>
  
  <p>Here's the jQuery I'm using:</p>
  
  <pre><code>$(document).ready(function() {
      $(".sectionhead").click( function() {
          $(this).next("tr").toggle("150");
      });
  });
  </code></pre>
  
  <p>So after a few iterations, the table (which has only the tr.sectionhead row visible in it) is quite large.</p>
  
  <p>Is there a built-in way that I can avoid this behaviour, or is there some way of doing this in jQuery that would be easier than what I'm doing?</p>
  
  <p><strong>Edit</strong></p>
  
  <p>My actual solution suggested by ScottE's answer below (I don't want to have to class the tr I'm toggling, and it will be visible to start with):</p>
  
  <pre><code>$(document).ready(function() {
      $(".sectionhead").toggle(
          function() {
              $(this).next("tr").hide();
          },
          function() {
              $(this).next("tr").show();
          }
      )
  });
  </code></pre>