JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" class="showhide">Скрыть</a>

<table>
	<tr>
		<td>Не скрывать</td>
		<td>Не скрывать</td>
	</tr>
	<tr>
		<td>Не скрывать</td>
		<td>Не скрывать</td>
	</tr>
	<div> 
	<tr class="hide">
		<td>Скрыть</td>
		<td>Скрыть</td>
	</tr>
	<tr class="hide">
		<td>Скрыть</td>
		<td>Скрыть</td>
	</tr>
</table>

CSS

.hide td
{
    opacity: 1;
    visibility: visiblity;
    
    transition: all .3s ease-in-out;
}

.hide.hided td
{
    opacity: 0;
    visibility: hidden;
}

JavaScript

$(document).ready(function(){ // По загрузке документа выполняем ф-цию
	$('.showhide').click(function () {
    	if($('.hide').hasClass('hided')) {
        	$(this).text('Скрыть');
            $('.hide').removeClass('hided');
        }
        else {
            $(this).text('Развернуть');
            $('.hide').addClass('hided');
        }
    });
});