JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr class="tab">
        <td>
            1
        </td>
        <td>
            2
        </td>
        <td>
            3
        </td>
    </tr>
    <tr class="hidden-row">
        <td colspan="3">hidden</td>
    </tr>
    <tr class="tab">
    <td>first</td>
    <td>second</td>
    <td>third</td>
</tr>
<tr class="hidden-row">
   <td colspan="3">hidden</td>
 </tr>
</table>

CSS

table {
    border-collapse: collapse;
}
tr {
    border-width: 0 0 1px 0;
    border-style: solid;
    border-color: #fff;
}
td {
    background: grey;
    color: white;
    padding: 5px; 
    text-align: center;
}

JavaScript

$('.hidden-row')
.children('td')
.css('padding', 0)
.wrapInner('<div />');
$('.hidden-row div').hide();

$(".tab").click(function() {
  $(this)
  .next()
  .find('td')
  .css('padding', '');
  $(this)
  .next()
  .find('div')
  .slideToggle(function() {
   if($(this).is(':hidden')) {
      $(this).parent('td').css('padding',0);
   }
  });
});