JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tbody class="category">
        <tr><td>Category - 1</td></tr>
    </tbody>
    <tbody class="subcategory">
        <tr><td>Sub Cateogry 1.1</td></tr>
        <tr><td>Sub Cateogry 1.2</td></tr>
    </tbody>
    <tbody class="category">
       <tr><td>Category - 2</td></tr>
    </tbody>
    <tbody class="subcategory">
       <tr><td>Sub Cateogry 2.1</td></tr>
    </tbody>
</table>

CSS

table { width: 100%; }

JavaScript

$(document).ready(function () {
    $('table').accordion({header: '.category' });
});