JSFiddle - React, Tailwind, and code Playground

by _abl

HTML

<div id="head">
    
    <p>Nice content above table</p>   
</div>
<hr />
<div id="foo">
<table border="0">
  <tr  class="header">
      <td >Prop 1a</td>
      <td >Prop 2b</td>
      <td >Prop 3c</td>
      <td >Prop 4d <span class="meer">+</span></td>
  </tr>
  <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  class="header">
     <td >Prop 1b</td>
      <td >Prop 2b</td>
      <td >Prop 3b</td>
       <td >Prop 4b <span class="meer">+</span></td>
  </tr>
  <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>

</table>
</div>
<div id="bar">
    <hr />
     <p>Nice content under the table</p>
    <p>After Toggling the table this disappears too !</p>
</div>

CSS

.meer{cursor:pointer; font-weight:bold;}
#bar p{color:red;}

JavaScript

$('.header').nextUntil('tr.header').slideToggle(0, function(){
});

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