JSFiddle - React, Tailwind, and code Playground

HTML

<table>
  <tr>
    <td class="details-control"><a>L-O</a></td>
    <td>This is parent 1</td>
  </tr>
  <tr class="hidden">
    <td></td>
    <td>This is 1st Child</td>
  </tr>
  <tr class="hidden">
    <td></td>
    <td>This is 2nd Child</td>
  </tr>
  <tr>
    <td class="details-control"><a>L-O</a></td>
    <td>This is parent 2</td>
  </tr>
  <tr class="hidden">
    <td></td>
    <td>This is 1st Child</td>
  </tr>
</table>

CSS

a {
  width: 50px;
  display: block;
  background: yellow
}

.child {
  color: blue;
  display: none;
}

.hidden {
  display: none;
}

.details-control {
  cursor: pointer;
}

JavaScript

$('.details-control').click(function() {
  var $td = $(this);

  if ($td.html() == '<a>L-O</a>') {
    $td.html('<a>L-C</a>');
    $td.parent().nextUntil(":not('.hidden')").show();
  } else {
    $td.html('<a>L-O</a>');
    $td.parent().nextUntil(":not('.hidden')").hide();
  }
})