JSFiddle - React, Tailwind, and code Playground

HTML

<table id="show">
    <tr>
        <td>ICON</td>
        <td>NAME</td>
        <td><a href="#show" id="open" class="trigger open">Open</a>
        <a href="#hide" id="close" class="trigger close">Close</a>            </td>
    </tr>
        
    <tr id="spoiler" class="spoiler">
        <td>1.1</td>
        <td>1.2</td>
        <td>1.3</td>
    </tr>
        
          <tr>
        <td>ICON</td>
        <td>NAME</td>
        <td><a href="#show" id="open" class="trigger open">Open</a>
        <a href="#hide" id="close" class="trigger close">Close</a>            </td>
    </tr>
        
    <tr id="spoiler" class="spoiler">
        <td>2.1</td>
        <td>2.2</td>
        <td>2.3</td>
    </tr>
        
        
</table>

CSS

#spoiler, #close {
    display: none;
}
#show:target #spoiler {
    display: table-row;
}
#show:target #open {
    display: none;
}
#show:target #close {
    display: block;
}