JSFiddle - React, Tailwind, and code Playground
HTML
<html>
<head></head>
<body>
<a href="#" class="show"><b class="atable">Show</b> table</a>
<div id="atable" class="hidden">
<h3 class="color">Table showing arrivals<br />at Bristol Airport</h3>
<table summary="This table lists flights arriving at Bristol International Airport.">
<caption>Arrivals to Bristol - England</caption>
<thead>
<tr>
<th scope="col">Flight code</th>
<th scope="col">From</th>
<th scope="col">STA</th>
<th scope="col">ETA</th>
<th scope="col" class="nd">Notes</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="5">Date : 19th October 2005</td>
</tr>
</tfoot>
<tbody>
<tr>
<th scope="row">T3 4264</th>
<td>Isle of Man</td>
<td>11:40</td>
<td>11:42</td>
<td>landed at 11:43</td>
</tr>
<tr>
<th scope="row">BA 4081</th>
<td>Paris-CDG</td>
<td>11:45</td>
<td>11:57</td>
<td>landed at 11:58</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
CSS
#morelist {
float: left;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 50px;
padding-top: 0;
}
.show {
cursor: pointer;
}
.show b {
font-weight: normal;
}
.hidden {
display: none;
float: left;
width: 400px;
}
.clear {
clear: both;
}
JavaScript
$(document).ready(function(){
$(".hidden").hide();
$(".show b").html("Show");
$(".show").click(function(event) {
event.preventDefault();
if (this.className.indexOf('clicked') != -1 ) {
$(".hidden").hide();
$(this).removeClass('clicked')
$(this).children("b").html("Show");
}
else {
$(".hidden").hide();
$(".show").removeClass('clicked');
$(".show").children("b").html("Show");
current = $(this).children("b").attr("class");
$("#"+current).show();
$(this).addClass('clicked')
$(this).children("b").html("Hide");
}
});
});