How to hide tbody on click on thead?

• 0
  Hello everyone, fought fought and still some kind of mistake.
  Can someone tell me how to hide a specific tbody block by clicking on its thead?
  
  There is a table:
  

  <table class="table-panel">
    <thead class="tableHead">
      <tr class="">
        <th id="collapsible" colspan="2">Общее</th>
      </tr>
    </thead>
    <tbody id="tableBody">
      <tr class="">
        <td class="leftcell"><span class="yellow">Здоровье</span></td>
        <td class="rightcell">50</td>
      </tr>
      <tr class="">
        <td class="leftcell"><span class="yellow">Мана</span></td>
        <td class="rightcell">50</td>
      </tr>
      <tr class="">
        <td class="leftcell"><span class="yellow">Ур. предметов</span></td>
        <td class="rightcell">0/0</td>
      </tr>
      <tr class="">
        <td class="leftcell"><span class="yellow">Скорость</span></td>
        <td class="rightcell">100%</td>
      </tr>
    </tbody>
  
    <thead class="tableHead">
      <tr class="">
        <th id="collapsible" colspan="2">Характеристики</th>
      </tr>
    </thead>
    <tbody id="tableBody">
      <tr class="">
        <td class="leftcell"><span class="yellow">Здоровье</span></td>
        <td class="rightcell">50</td>
      </tr>
      <tr class="">
        <td class="leftcell"><span class="yellow">Мана</span></td>
        <td class="rightcell">50</td>
      </tr>
      <tr class="">
        <td class="leftcell"><span class="yellow">Ур. предметов</span></td>
        <td class="rightcell">0/0</td>
      </tr>
      <tr class="">
        <td class="leftcell"><span class="yellow">Скорость</span></td>
        <td class="rightcell">100%</td>
      </tr>
  
    </tbody>
  </table>

  
  
  And there is Jquery code
  

  $(function () {
                 var tableBody = $("#tableBody"),
                 tableHead = $("#tableHead");
                 tableTH = $(".collapsible");
                 tableHead.click(function () {
                   tableBody.slideToggle(10);
                   tableTH.toggleClass("coactive");
                 });
               });

  
  
  
  
  Clicking on the top thead (General) hides only the top of the table.
  By clicking on the bottom thead (Characteristics) - nothing is hidden.
  The .coactive class is added to all at once, and not to the one under which the tbody is hidden

  JavaScript Anonymous, Dec 8, 2019

---

1 Answers
• 0

  $(function () {
  
              const tableHead = $(".tableHead");
  
  
  
              tableHead.click(function () {
  
                  $(this).next().fadeToggle();
  
              });
  
  });

  Anonymous

---