jQuery toggle tbody
<p>I am nesting tables within tables and want to toggle the them when you click on a <code>&lt;th class="folder"&gt;</code></p>

<pre><code>    $('table').each(function(){
        $('th.folder', this).bind('click', function(){
            $(this).closest('table').children('tbody').toggle();
        });
    });
</code></pre>

<p>Here is some typical HTML:</p>

<pre><code>&lt;table&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th&gt;Title&lt;/th&gt;
      &lt;th class="type"&gt;Type&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td&gt;
        &lt;table&gt;
          &lt;thead&gt;
            &lt;tr&gt;
              &lt;th class="folder" colspan="2"&gt;Deal flow&lt;/th&gt;
            &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
            &lt;tr&gt;
              &lt;td&gt;item 1&lt;/td&gt;
              &lt;td&gt;image&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td&gt;item 2&lt;/td&gt;
              &lt;td&gt;image&lt;/td&gt;
            &lt;/tr&gt;
          &lt;/tbody&gt;
        &lt;/table&gt;
        &lt;table&gt;
          &lt;thead&gt;
            &lt;tr&gt;
              &lt;th class="folder" colspan="2"&gt;Rejected deals&lt;/th&gt;
            &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
            &lt;tr&gt;
              &lt;td&gt;item 3&lt;/td&gt;
              &lt;td&gt;image&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td&gt;item 4&lt;/td&gt;
              &lt;td&gt;image&lt;/td&gt;
            &lt;/tr&gt;
          &lt;/tbody&gt;
        &lt;/table&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;
</code></pre>

<p>Doesn't seem to work and I can't figure out why! Any ideas?</p>
