JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<table>
    <thead>
        <tr>
            <th>&nbsp;</th>
            <th>Main Column 1</th>
            <th>Main Column 2</th>
            <th>Main Column 3</th>
            <th>Main Column 4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <!--this data row has no child tables associated with it, so the first column will not have the [+] icon.-->
            <td>&nbsp;</td>
            <td>Parent1 Col 1</td>
            <td>Parent1 Col 2</td>
            <td>Parent1 Col 3</td>
            <td>Parent1 Col 4</td>
        </tr>
        <tr class="parent">
            <!--this data row has a "child" table associated with it.-->
            <td><a href="#" class="toggle">[+]</a>

            </td>
            <td>Parent2 Col 1</td>
            <td>Parent2 Col 2</td>
            <td>Parent2 Col 3</td>
            <td>Parent2 Col 4</td>
        </tr>
        <tr class="child">
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td colspan="4">
                <table>
                    <thead>
                        <tr>
                            <th>Child Col 1</th>
                            <th>Child Col 2</th>
                            <th>Child Col 3</th>
                            <th>Child Col 4</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Data</td>
                            <td>Data</td>
                            <td>Data</td>
                            <td>Data</td>
                        </tr>
                        <tr>
                            <td>Data</td>
                            <td>Data</td>
                            <td>Data</td>
                            <td>Data</td>
                        </tr>
                        <tr>
                            <td>Data</td>
                           ...

JavaScript

$(document).ready(function () {
    $('tr[class^=child]').hide();
    $('a.toggle').on('click', function (e) {
        e.preventDefault();
        var $this = $(this);
        var nxt = $this.closest('tr.parent').nextAll('tr').each(function(){
            if($(this).hasClass('parent')){return false; }
            $(this).toggle();
        });
    })
});