title: Collapsing table rows with multiple tbody elements
body: <p>I have a table that looks like this:</p>
  
  <pre><code>&lt;table&gt;
      &lt;thead&gt;
          &lt;tr&gt;&lt;th&gt;Customer&lt;/th&gt;&lt;th&gt;Order&lt;/th&gt;&lt;th&gt;Month&lt;/th&gt;&lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr&gt;&lt;td&gt;Customer 1&lt;/td&gt;&lt;td&gt;#1&lt;/td&gt;&lt;td&gt;January&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;Customer 1&lt;/td&gt;&lt;td&gt;#2&lt;/td&gt;&lt;td&gt;April&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;Customer 1&lt;/td&gt;&lt;td&gt;#3&lt;/td&gt;&lt;td&gt;March&lt;/td&gt;&lt;/tr&gt;
      &lt;/tbody&gt;
      &lt;tbody&gt;
          &lt;tr&gt;&lt;td&gt;Customer 2&lt;/td&gt;&lt;td&gt;#1&lt;/td&gt;&lt;td&gt;January&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;Customer 2&lt;/td&gt;&lt;td&gt;#2&lt;/td&gt;&lt;td&gt;April&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;Customer 2&lt;/td&gt;&lt;td&gt;#3&lt;/td&gt;&lt;td&gt;March&lt;/td&gt;&lt;/tr&gt;
      &lt;/tbody&gt;
      &lt;tbody&gt;
          &lt;tr&gt;&lt;td&gt;Customer 3&lt;/td&gt;&lt;td&gt;#1&lt;/td&gt;&lt;td&gt;January&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;Customer 3&lt;/td&gt;&lt;td&gt;#2&lt;/td&gt;&lt;td&gt;April&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;Customer 3&lt;/td&gt;&lt;td&gt;#3&lt;/td&gt;&lt;td&gt;March&lt;/td&gt;&lt;/tr&gt;
      &lt;/tbody&gt;
      ....
      .... 10s of records like this
  &lt;/table&gt;
  </code></pre>
  
  <p>I want to make each tbody element clickable (collapsible) so that in a collapsed state, I would get a summary of what is inside (say, <code>Customer 1 | 3 Entries</code>) and in an expanded state, I would get to see the actual rows.</p>
  
  <p>Can this be done for the table structured as shown above?</p>
  
  <p>JSFiddle here: <a href="http://jsfiddle.net/Ju4xH/" rel="nofollow">http://jsfiddle.net/Ju4xH/</a></p>