JSFiddle - React, Tailwind, and code Playground

by jasper

HTML

<div id="div-handle" class="show-first">
  <table class="table-css first-table">
      <tr>
          <td>first-table</td>          
      </tr>
  </table>
  <table class="table-css second-table">
      <tr>
          <td>second-table</td>          
      </tr>
  </table>
</div>
<a id="some-link" href="#">Some Link</a>

CSS

.table-css{ 
    border-collapse:collapse;
    margin:0;
    padding:0;
    text-align:left;
    width:100%;
    background : red;
}

.show-first .first-table{ display:table; }
.show-first .second-table{ display:none; }

.show-second .first-table{ display:none; }
.show-second .second-table{ display:block; }

JavaScript

$('#some-link').click(function(){ 
    $('#div-handle').toggleClass('show-first').toggleClass('show-second');
    return false;
});