JSFiddle - React, Tailwind, and code Playground

by Anik Islam Abhi

HTML

<table width="200" border="1">
  <tr>
    <td rowspan="7">Summary </td>
    <td colspan="3">
      <div align="center">1 st level</div>
    </td>
  </tr>
  <tr>
    <td colspan="3">
      <div class="P1"><span>-</span>Parameter 1</div>
    </td>
  </tr>
  <tr>
    <td id="problematicRowspan" rowspan="4">L1</td>
    <td colspan="2">
      <div class="Sub-parameter-1"><span>-</span>Sub parameter (1)</div>
    </td>
  </tr>
  <tr>
    <td>L2</td>
    <td>description</td>
  </tr>
  <tr>
    <td>L2</td>
    <td>description1</td>
  </tr>
  <tr>
    <td colspan="2">
      <div class="Sub-parameter-2"><span>-</span>Sub parameter (2)</td>
  </tr>
  <tr>
    <td colspan="3">
      <div class="P2">Parameter 2</div>
    </td>
  </tr>
</table>

JavaScript

$('.P1').click(function() {
  $(this).find('span').text(function(_, value) {
    return value == '-' ? '+' : '-'
  });
  $(this).closest('tr').nextUntil('tr:has(.P2)').slideToggle(100, function() {});
});

$('.Sub-parameter-1').click(function() {
  var _this = $(this);
  $(this).find('span').text(function(_, value) {
    return value == '-' ? '+' : '-'
  });
  $(this).closest('tr').nextUntil('tr:has(.Sub-parameter-2)').slideToggle(100, function() {});
  var rows = parseInt($('#problematicRowspan').attr('rowspan'));
  if (rows == 4) {
    rows -= 2;
    _this.closest("#problematicRowspan").hide();
    //$('#problematicRowspan').hide();
  } else {
    rows += 2;
    _this.closest("#problematicRowspan").show();
  }
  $('#problematicRowspan').attr('rowspan', rows);
});