title: Using CSS transition and class toggle to show/hide table rows
body: <p>I have a number of tables that have many rows.  I want to initially only show the first three table rows.  When a user clicks the Show/Hide link, then all hidden rows will be toggled. I have achieved this so far with CSS3 and JavaScript (<a href="https://jsfiddle.net/fh861ye4/5/" rel="nofollow noreferrer">see Fiddle</a>).</p>
  
  <p>CSS (only show three rows by default):</p>
  
  <pre><code>.hide tr:nth-child(n+4) {
    display:none;
  }
  </code></pre>
  
  <p>JavaScript (toggle above class to show all rows):</p>
  
  <pre><code>function ShowHide() {
    var tables = document.getElementsByClassName('foo');
    for(i=0; i&lt;tables.length; i++) {
      tables[i].classList.toggle("hide");  
    }
  }
  </code></pre>
  
  <p>Is it possible to use the <code>transition</code> functionality of CSS3 to make the rows appear slowly, rather than instantly?  For example, fade in/out over 2 seconds?</p>
  
  <p>I know this can be done easily in JQuery, but I'm looking for a pure CSS solution.</p>