JSFiddle - React, Tailwind, and code Playground
HTML
<div class="alertsList">
<table width="100%">
<thead>
<tr>
<th></th>
<th>Id</th>
<th>From</th>
<th>Action</th>
<th>State</th>
<th>time</th>
</tr>
</thead>
<tbody>
<tr class="alertRow">
<td></td>
<td>1025973</td>
<td>SYSTEM</td>
<td>false</td>
<td class="Active">Active</td>
<td>2014-09-23T00:59:26.92</td>
</tr>
<tr class="alertRow">
<td></td>
<td>1025974</td>
<td>SYSTEM</td>
<td>false</td>
<td class="Active">Active</td>
<td>2014-09-23T00:59:26.92</td>
</tr>
<tr class="alertRow InActive">
<td></td>
<td>1025974</td>
<td>SYSTEM</td>
<td>false</td>
<td class="">InActive</td>
<td>2014-09-23T00:59:26.92</td>
</tr>
<tr class="alertRow InActive">
<td></td>
<td>1025974</td>
<td>SYSTEM</td>
<td>false</td>
<td class="">InActive</td>
<td>2014-09-23T00:59:26.92</td>
</tr>
<tr class="alertRow">
<td></td>
<td>1025974</td>
<td>SYSTEM</td>
<td>false</td>
<td class="Active">Active</td>
<td>2014-09-23T00:59:26.92</td>
</tr>
</tbody>
</table>
<button id="btnToggle">Hide inactive items</button>
</div>
JavaScript
$('#btnToggle').click(function () {
$('tr.InActive').closest('tr').fadeToggle(1000);
//update the button's message
var $btn = $(this);
$btn.toggleClass('show');
if ($btn.hasClass('show')) {
$btn.text('Show inactive items');
} else {
$btn.text('Hide inactive items');
};
});