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.parent').next('tr.child').hide();
			    $('tr.parent').next('tr.child1').hide();
			    $('tr.child').next('tr.child1').hide();
			    $('a.toggle').on('click', function (e) {
			        e.preventDefault();
			        var $this = $(this),
			        if ('tr.parent').next('tr.child') != null {
			            $child = $this.closest('tr.parent').next('tr.child');
			        }
			        if ('tr.parent').next('tr.child1') != null {
			            $child = $this.closest('tr.parent').next('tr.child1');
			        }
			        if ('tr.child').next('tr.child1') != null {
			            $child = $this.closest('tr.child').next('tr.child1');
			        }
			        $this.closest('tr.parent').siblings('tr.child').not($child).hide();
			        $child.toggle();
			    })
			});