JSFiddle - React, Tailwind, and code Playground

HTML

<table id="table">
<tr>
<td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td class="clickable">6</td> <td class="clickable">7</td>
</tr>
<tr class="toggleVis"><td colspan="7">this row should be toggled between show/hide once one of the clickable TDs were clicked</td></tr>
</table>

CSS

.clickable{cursor:pointer;}
.hide{display:none;}
.hover{font-weight:bold;border:solid 1px blue;background-color:yellow;}

JavaScript

$(".clickable").click(function() {
    $(".toggleVis").toggleClass("hide");
});
$('tr', "#table").hover(
    function() {
        $(this).toggleClass("hover");
    },
    function() {
        $(this).toggleClass("hover");
    });