JSFiddle - React, Tailwind, and code Playground

by David Thomas

HTML

<table id="SubstancesWithMissingSwedishSubstanceName" class="controlTable">
    <thead>
        <tr class="rowToClick1">
            <th title="Expandera/Minimera">Substance id: <span>-</span>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr class="rowToExpand1">
            <td>data here...</td>
        </tr>
    </tbody>
</table>
<hr />
<table>
    <thead>
        <tr class="rowToClick2">
            <th title="Expandera/Minimera">Substance id: <span>-</span>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr class="rowToExpand2">
            <td>data here...</td>
        </tr>
    </tbody>
</table>

CSS

table {
    border: 1px solid black;
}
.rowToClick1 {
    cursor: pointer;
}
.rowToClick2 {
    cursor: pointer;
}

JavaScript

$('th').click(function () {
    $(this).find('span').text(function (_, value) {
            return value == '-' ? '+' : '-';
        }).closest('thead').next('tbody').find('tr').toggle();
});