JSFiddle - React, Tailwind, and code Playground

HTML

<div id="tbl">Here is a whole bunch of content that we want to hide</div>
<a id="sizeTbl" href="#bottom"><span id="toggle-table">hide</span></a>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<a name="bottom">Bottom</a>

JavaScript

function sizeTbl() {
    var tbl = document.getElementById('tbl');
    var icon = document.getElementById('toggle-table');
    if (icon.innerText === 'show') {

        tbl.style.display = 'block';
        icon.innerText = 'hide';
    } else {
        tbl.style.display = 'none';
        icon.innerText = 'show';
    }
}

$(document).ready(function(){
    $('#sizeTbl').on('click', sizeTbl);
});