JSFiddle - React, Tailwind, and code Playground

HTML

<p>
 <input type="button" id="bar" value="Show/Hide" />
</p>

<h2>Table 1</h2>
<table class="foo hide">
  <tr><td>Text</td></tr>
  <tr><td>Text</td></tr>
  <tr><td>Text</td></tr>
  <tr><td>Text</td></tr>
  <tr><td>Text</td></tr>
  <tr><td>Text</td></tr>
</table>

<h2>Table 2</h2>
<table class="foo hide">
  <tr><td>Text</td></tr>
  <tr><td>Text</td></tr>
  <tr><td>Text</td></tr>
  <tr><td>Text</td></tr>
  <tr><td>Text</td></tr>
  <tr><td>Text</td></tr>
</table>

CSS

td { border-bottom:1px solid #ccc; }

.hide tr:nth-child(n+4) {
  display:none;
  transition: all 1s ease-in-out;;
}

JavaScript

var theButton = document.getElementById("bar");
theButton.onclick = ShowHide;


function ShowHide() {
	var tables = document.getElementsByClassName('foo');
  for(i=0; i<tables.length; i++) {
  	tables[i].classList.toggle("hide");  
  }
}