JSFiddle - React, Tailwind, and code Playground

HTML

<div class="tb">
    <input type="checkbox"/>
    <span>Show</span><span>Hide</span>
    <table class="collapsible" id="collapsible1">
        <tr>
            <td>Hello 1</td>
        </tr>   
    </table>    
</div>
<div class="tb">
    <input type="checkbox"/>
    <span>Show</span><span>Hide</span>
    <table class="collapsible" id="collapsible1">
        <tr>
            <td>Hello 2</td>
        </tr>   
    </table>    
</div>
<div class="tb">
    <input type="checkbox"/>
    <span>Show</span><span>Hide</span>
    <table class="collapsible" id="collapsible1">
        <tr>
            <td>Hello 3</td>
        </tr>   
    </table>    
</div>

CSS

.tb {
    margin:10px 0;
    position:relative;
}
input[type="checkbox"] {
    width:100%;
    height:23px;
    position:absolute;
    left:0;
    top:0;
    opacity:0;
    z-index:10;
    cursor:pointer;
}
input[type="checkbox"]:hover ~ span{
    background:black;
}
.tb span {
    position:relative;
    height:23px;
    line-height:23px;
    display:inline-block;
    background:red;
    color:white;
    transition:all .3s ease;
    padding:0 10px;
    width:100%;
}
.tb span+span, .collapsible {
    display:none;
}
.tb input[type="checkbox"]:checked ~ span {
    display:none;
}
.tb input[type="checkbox"]:checked ~ span+span{
    display:inline-block;
}
.tb input[type="checkbox"]:checked ~ .collapsible {
    display:table;
}