JSFiddle - React, Tailwind, and code Playground

HTML

<table>
 <tbody>
    <tr class="principale" onclick='mostra(2);' >
        <td colspan="3"  > Riga principale </td>
    </tr>
    <tr rel="2" class="nascosta" >
        <td>a</td>
        <td>b</td>
        <td>c</td>
    </tr>
    <tr rel="2" class="nascosta" >
        <td>a</td>
        <td>b</td>
        <td>c</td>
    </tr>
    <tr rel="2" class="nascosta" >
        <td>a</td>
        <td>b</td>
        <td>c</td>
    </tr>
    <tr class="principale" onclick="mostra(3)" >
        <td colspan="3"  > Riga principale </td>
    </tr>
    <tr rel="3" class="nascosta" >
        <td>a</td>
        <td>b</td>
        <td>c</td>
    </tr>
    <tr rel="3" class="nascosta" >
        <td>a</td>
        <td>b</td>
        <td>c</td>
    </tr>
    <tr rel="3" class="nascosta" >
        <td>a</td>
        <td>b</td>
        <td>c</td>
    </tr>
    <tr class="principale" onclick="mostra(4)" >
        <td colspan="3"  > Riga principale </td>
    </tr>
    <tr rel="4" class="nascosta" >
        <td>a</td>
        <td>b</td>
        <td>c</td>
    </tr>
    <tr rel="4" class="nascosta" >
        <td>a</td>
        <td>b</td>
        <td>c</td>
    </tr>
    <tr rel="4" class="nascosta" >
        <td>a</td>
        <td>b</td>
        <td>c</td>
    </tr>
</tbody>
</table>

CSS

.nascosta {
    display: none;
}

.principale {
    background-color: blue;
    color: white;
    cursor: pointer;
}
.principale:hover {
    background-color: red;
}

JavaScript

mostra = function(value) {
    $('[rel]').hide()
    $('[rel='+value+']').show();
}