JSFiddle - React, Tailwind, and code Playground

HTML

<table id="itdev_gangs">
    <tr class="gang-name">
        <td colspan="2">The Blips</td>
    </tr>
    <tr class="members blips">
        <td>Rotton </td>
        <td>Rob</td>
    </tr>
    <tr class="members blips">
        <td>Effram</td>
        <td>The Dumb Rabbot</td>
    </tr>
    <tr class="gang-name">
        <td colspan="2">The Crudz</td>
    </tr>
    <tr class="members crudz">
        <td>Jason</td>
        <td>"Sky" Halker</td>
    </tr>
    <tr class="members crudz">
        <td>Sparky</td>
        <td>That stupid Eagle</td>
    </tr>
    <tr class="gang-name">
        <td colspan="2">The Satin Flings</td>
    </tr>
    <tr class="members satin-flings">
        <td>Josh-man</td>
        <td>McDanielson-man III</td>
    </tr>
    <tr class="members satin-flings">
        <td>Dominque</td>
        <td>The Christmas Donkey</td>
    </tr>
</table>

CSS

.gang-name{
    font-size:25px;
    font-family:cursive;
    background-color:lightgray;
    cursor:pointer;
}
.members {
    font-family:helvetica;
}
.blips {
    color:red;
}
.crudz {
    color:blue;
}
.satin-flings {
    color:rgb(213, 194, 0);
}
td {
    padding-right:10px;
    padding-left:10px;
}

JavaScript

$('.gang-name').click(function(){
    if($(this).hasClass("collapsed")){
        $(this).nextUntil('tr.gang-name')
        .find('td')
        .parent()
        .find('td > div')
        .slideDown("fast", function(){
            var $set = $(this);
            $set.replaceWith($set.contents());
        });
        $(this).removeClass("collapsed");
    } else {
        $(this).nextUntil('tr.gang-name')
        .find('td')
        .wrapInner('<div style="display: block;" />')
        .parent()
        .find('td > div')
        .slideUp("fast");
        $(this).addClass("collapsed");
    }
});