title: Collapsing table with html
body: <p>I have a table that I want to show used, available, and total for storage for specific servers. However, the servers have multiple drives and I want the default view to show totals for all storage for used, all for available, and all for total. But clicking the row drops it down to view the breakdown. I'll have all the data inputted into each cell, but I'm not sure how to do the drop down (collapse and expand).</p>
  
  <p>eg. collapse view</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table&gt;
       &lt;th&gt;&lt;/th&gt;&lt;th&gt;server 1&lt;/th&gt;&lt;th&gt;server 2&lt;/th&gt;
       &lt;tr&gt;&lt;td&gt;used&lt;/td&gt;&lt;td&gt;1gb&lt;/td&gt;&lt;td&gt;2gb&lt;/td&gt;&lt;/tr&gt;
       &lt;tr&gt;&lt;td&gt;available&lt;/td&gt;&lt;td&gt;1gb&lt;/td&gt;&lt;td&gt;2gb&lt;/td&gt;&lt;/tr&gt;
       &lt;tr&gt;&lt;td&gt;total&lt;/td&gt;&lt;td&gt;2gb&lt;/td&gt;&lt;td&gt;4gb&lt;/td&gt;&lt;/tr&gt;
      &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>eg. expanded view</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>  &lt;table&gt;
       &lt;th&gt;&lt;/th&gt;&lt;th&gt;server 1&lt;/th&gt;&lt;th&gt;server 2&lt;/th&gt;
       &lt;tr&gt;&lt;td&gt;used&lt;/td&gt;&lt;td&gt;1gb&lt;/td&gt;&lt;td&gt;2gb&lt;/td&gt;&lt;/tr&gt;
       &lt;tr&gt;&lt;td&gt;drive 1&lt;/td&gt;&lt;td&gt;0.5gb&lt;/td&gt;&lt;td&gt;1gb&lt;/td&gt;&lt;/tr&gt;
       &lt;tr&gt;&lt;td&gt;drive 2&lt;/td&gt;&lt;td&gt;0.5gb&lt;/td&gt;&lt;td&gt;1gb&lt;/td&gt;&lt;/tr&gt;
       &lt;tr&gt;&lt;td&gt;available&lt;/td&gt;&lt;td&gt;1gb&lt;/td&gt;&lt;td&gt;2gb&lt;/td&gt;&lt;/tr&gt;
       &lt;tr&gt;&lt;td&gt;drive 1&lt;/td&gt;&lt;td&gt;0.5gb&lt;/td&gt;&lt;td&gt;1gb&lt;/td&gt;&lt;/tr&gt;
       &lt;tr&gt;&lt;td&gt;drive 2&lt;/td&gt;&lt;td&gt;0.5gb&lt;/td&gt;&lt;td&gt;1gb&lt;/td&gt;&lt;/tr&gt;
       &lt;tr&gt;&lt;td&gt;total&lt;/td&gt;&lt;td&gt;2gb&lt;/td&gt;&lt;td&gt;4gb&lt;/td&gt;&lt;/tr&gt;
      &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>