JSFiddle - React, Tailwind, and code Playground

HTML

<table>
<tr id='OK1' class='parent'><td>Родитель 1</td></tr>
<tr class='child OK1'><td>Потомок 1.1</td></tr>
<tr class='child OK1'><td>Потомок 1.2</td></tr>
<tr class='child OK1'><td>Потомок 1.3</td></tr>
<tr id='OK2'class='parent'><td>Родитель 2</td></tr>
<tr class='child OK2'><td>Потомок 2.1</td></tr>
<tr class='child OK2'><td>Потомок 2.2</td></tr>
</table>

CSS

tr.child {
  display: none;
  font-size: 0.9em;
}

tr.child td {
  padding-left: 1em;
}

tr {
  cursor: pointer;
}

JavaScript

function toggleChilds(event) {
	let parent = event.target.parentNode.id;
  let childs = document.getElementsByClassName(parent);
  let isHidden = ('' == childs[0].style.display 
                  || 'none' == childs[0].style.display);
  let newState = (isHidden ? 'table-row' : 'none');
  for (let i = 0; i < childs.length; i++) {
  	childs[i].style.display = newState;
  }
}

window.onload = function() {
  let parents = document.getElementsByClassName('parent');
  for (let i = 0; i < parents.length; i++) {
  	parents[i].addEventListener('click', toggleChilds);
  }
}