JSFiddle - React, Tailwind, and code Playground

by ChrisStanyon

HTML

<table class="tblPermissions_Master">
  <thead>
    <tr>
      <th>permissionID</th>
      <th>Name</th>
      <th>View</th>
      <th>Edit</th>
      <th>Delete</th>
      <th>Expland</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>25</td>
      <td>Employees / Contractors</td>
      <td><input type="checkbox" checked="checked"></td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td class="expandChildTable">+</td>
    </tr>
    <tr>
      <td></td>
      <td colspan="5">
        <table class="tblPermissions_Child">
          <thead>
            <tr>
              <th>permissionID</th>
              <th>Name</th>
              <th>View</th>
              <th>Edit</th>
              <th>Delete</th>
              <th>Expland</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>33</td>
              <td>All</td>
              <td><input type="checkbox" checked="checked"></td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td>34</td>
              <td>Employees</td>
              <td><input type="checkbox" checked="checked"></td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td>35</td>
              <td>Contractors</td>
              <td><input type="checkbox" checked="checked"></td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td>36</td>
              <td>Archive</td>
              <td><input type="checkbox" checked="checked"></td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
    <tr>
      <td>26</td>
      <td>Courses</td>
      <td><input type="checkbox" checked="checked"></td>
      <td>&nbsp;</td>
     ...

CSS

table, th, td {
  border: 1px solid green;
  border-collapse: collapse;
}

.tblPermissions_Child {
  display:none;
}

.expandChildTable {
  cursor:pointer;
}

JavaScript

$(document).ready(function() {
  $(".expandChildTable").on("click", function() {
    $(".tblPermissions_Child").css("display", "none");
    $(this).next(".tblPermissions_Child").css("display", "table");
  });
});