JSFiddle - React, Tailwind, and code Playground
HTML
<table>
<tr>
<td><input type="button" onclick="viewToggle('row534534');" title="Toggle" value="Show" id="btn534534" class="toggle" /> </td>
<td>some data about ID 534534</td>
</tr>
<tr id="row534534" class="hiddenRow">
<td colspan="2">some hidden data about ID 534534 that must show/hide with toggle</td>
</tr>
<tr>
<td><input type="button" onclick="viewToggle('row2423434');" title="Toggle" value="Show" id="btn2423434" class="toggle" /></td>
<td>some data about ID 2423434</td>
</tr>
<tr id="row2423434" class="hiddenRow">
<td colspan="2">some hidden data about ID 2423434that must show/hide with toggle</td>
</tr>
<!-- many more rows here -->
</table>
CSS
.hiddenRow { display: none; }
JavaScript
$('input.toggle').live('click', function(ev) {
var $this = $(this);
var row = $this.parents('tr').next('tr');
if (row.hasClass('hiddenRow')) {
$this.val('Hide');
row.removeClass('hiddenRow');
} else {
$this.val('Show');
row.addClass('hiddenRow');
}
});