title: Collapse entire table on click with animation
body: <p>I am have a table where I would like to be able to click on the table header row and that will collapse the rest of the table leaving only the header row (and expand back out). With a good deal of struggle I was able to get the table to actually change it's height on click, but haven't been able to get the animation to trigger. Here is the css that I have so far:</p>
  
  <pre><code>table {
    height: 100%;
    display: block;
    overflow: hidden;
  }
  
  .collapsed {
    animation-name: collapse;
    animation-duration: 2s;
  }
  
  @keyframes collapse {
    from { height: 100%; }
    to { height: 40px; }
  }
  
  /* This is the javascript that is trigger on click */
  this.refs.ruleslisttable.classList.toggle("ruleSetInfo__rule-list-table--collapsed");
  </code></pre>
  
  <p>The code above doesn't even trigger the new height when I toggle the class on the table, but has been my attempt at getting the animation in there.</p>