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

Your Answer
To place the code, please use CodePen or similar tool. Thanks you!