title: Hide all next tr td until next tr th
body: <p>it should be simple but this jQuery function are taking a element to much, it even hide the jQuery I think. </p>
  
  <p>What I will like to do, is when a person click a <strong>tr th</strong>, all next <strong>tr td</strong> should be hide until next <strong>tr th</strong>.</p>
  
  <p>How can I get this code to work??</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
    &lt;style&gt;
  th {  background:#dad;
        font-weight:bold;
        font-size:16px; 
        width: 50%;
  }
  td {  background:red;
        font-weight:bold;
        font-size:16px; 
        width: 50%;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;table id="example"&gt;
      &lt;tr&gt;
        &lt;th&gt;
          &lt;button&gt;Show it 3&lt;/button&gt;
        &lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;test 1&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;test 2&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;th&gt;
          &lt;button&gt;Show it 2&lt;/button&gt;
        &lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;test 3&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;test 4&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
  
      &lt;script&gt;
        $('#example tr th').click( function() {
          //alert($(this).parent().html())
          $(this).parent().nextUntil('tr th').toggle();
        })
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>