JSFiddle - React, Tailwind, and code Playground

by Puni Charana

HTML

<div id="foo">
	<span id="table1-btn">Table 1</span>
	<span id="table2-btn">Table 2</span>
</div>
<table id="table1">
	<tr>
		<td>Table 1</td><td>Table 1</td>
	</tr>
	<tr>
		<td>Table 1</td><td>Table 1</td>
	</tr>
</table>
<table id="table2">
	<tr>
		<td>Table 2</td><td>Table 2</td>
	</tr>
	<tr>
		<td>Table 2</td><td>Table 2</td>
	</tr>
</table>

CSS

#foo{
    width:200px;
    height:auto;
    padding:5px;
}
#table1-btn,
#table2-btn{
    width:100px;
    height:auto;
    padding:5px;
    background-color:#e3e3e3;
    cursor:pointer;
}

JavaScript

$(document).ready(function () {
    $('#table2').hide();

    $('#table1-btn').click(function () {
       $('#table2').hide();
       $('#table1').show();
    });
    $('#table2-btn').click(function () {
       $('#table1').hide();
       $('#table2').show();
    });
});