JSFiddle - React, Tailwind, and code Playground

HTML

<table class="AbbyNormal">
  <thead><tr><td colspan="3">TABLE HEADING</td></tr></thead>
  <tbody>
    <tr>
        <td class="first" colspan="1">Cell Contents</td>
        <td colspan="1">Cell Contents</td>
        <td colspan="1">Cell Contents Cell ContentsCell ContentsCell ContentsCell ContentsCell ContentsCell
                    ContentsCell 
        </td>
    </tr>
  </tbody>
</table>
<table>
  <thead><tr><td colspan="3">TABLE HEADING</td></tr></thead>
  <tbody>
    <tr>
        <td class="first" colspan="1">Cell Contents</td>
        <td colspan="1">Cell Contents</td>
        <td colspan="1">Cell Contents Cell ContentsCell ContentsCell ContentsCell ContentsCell ContentsCell
                    ContentsCell ContentsCell 
        </td>
    </tr>
  </tbody>
</table>

CSS

.AbbyNormal tbody{
    background: pink;
}
thead td {
    cursor: pointer;
}
.AbbyNormal tbody {display:block;}
table, td {border: 1px solid blue; padding: 1ex;}

JavaScript

$("thead").click(function () {
       $(this).next("tbody").slideToggle(1000);
    }
 )