JSFiddle - React, Tailwind, and code Playground

by Argoron

HTML

<a id="FirstC" href="#FirstC" class="collapsed1">Show</a><br />
<a id="FirstE" href="#FirstE" class="expanded1">Hide</a>
<table class="collapsible" id="collapsible1">
    <tr>
        <td>Hello</td>
    </tr>   
</table>    
<br /><br />
<a id="SecondC" href="#SecondC" class="collapsed2">Show</a><br />
<a id="SecondE" href="#SecondE" class="expanded2">Hide</a>
<table class="collapsible" id="collapsible2">
    <tr>
        <td>Hello</td>
    </tr>   
</table>    

<br /><br />
<a id="ThirdC" href="#ThirdC" class="collapsed3">Show</a><br />
<a id="ThirdE" href="#ThirdE" class="expanded3">Hide</a>
<table class="collapsible" id="collapsible3">
    <tr>
        <td>Hello</td>
    </tr>   
</table>

CSS

table.collapsible {
	display: none;
	}

#FirstE, #SecondE, #thirdE {
	display: none;
	}
	
#FirstC:target + #FirstE,
#SecondC:target + #SecondE,
#ThirdC:target + #ThirdE{
	display: inline;
	}
	
#FirstC:target, 
#SecondC:target,
#ThirdC:target{
	display: none;
	}

#FirstC:target ~ #collapsible1, 
#SecondC:target ~ #collapsible2,
#ThirdC:target ~ #collapsible3{
	display: inline;
}