JSFiddle - React, Tailwind, and code Playground

by Peter Aad

HTML

<table><tbody>
   <tr id="first-score-row">
      <td>Steve Ballmer</td>
      <td>1923</td>
      <td class="hide-under-480px">10/11/2015 9:21:39 PM</td>
   </tr>
   <tr>
      <td colspan="3">
         <p><a class="btn btn-primary btn-lg show-fewer-or-more-scores" id="show-more-scores">Click to See More</a></p>
      </td>
   </tr>
   <tr class="hidden">
      <td>Michael Jackson</td>
      <td>300</td>
      <td class="hide-under-480px">10/6/2015 2:37:30 PM</td>
   </tr>
   <tr class="hidden">
      <td>Weird Al</td>
      <td>180</td>
      <td class="hide-under-480px">10/10/2015 1:20:38 AM</td>
   </tr>
   <tr class="hidden">
      <td>Obama smokes cigs</td>
      <td>60</td>
      <td class="hide-under-480px">10/5/2015 10:28:37 PM</td>
   </tr>
   <tr class="hidden">
      <td>Donald Trump</td>
      <td>60</td>
      <td class="hide-under-480px">10/5/2015 10:28:02 PM</td>
   </tr>
   <tr class="hidden">
      <td colspan="3">
         <div class="row">
            <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
               <p><a class="btn btn-primary btn-lg show-fewer-or-more-scores" id="show-fewer-scores" target="_blank">See Fewer Scores</a></p>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
               <p><a href="/Scores" class="btn btn-primary btn-lg" target="_blank">See <u>All</u> Scores</a></p>
            </div>
         </div>
      </td>
   </tr>
</tbody> </table>

JavaScript

// click function for the "See More Scores" and "See Fewer Scores" buttons
$('.show-fewer-or-more-scores').click(function (){
    var otherRows = $(this).closest('tbody').children('tr:not(#first-score-row)');
    var n = otherRows.length;
    var k;
    for (k=0; k < n; k++){
        setTimeout(function(){ otherRows.eq(k).toggleClass('hidden'); }, k * 200);
    }
});