Как cкрывать tbody по клику по thead?

Question

[ngapp]

Всем привет, бился бился и всё равно какая то ошибка.
Может кто подскажет как скрывать конкретный блок tbody по клику по его thead?

Есть таблица:

<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>

И есть код Jquery

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

По клику по верхнему thead (Общее) скрывается только верхняя часть таблицы.
По клику по нижнему thead (Характеристики) - ничего не скрывается.
Класс .coactive добавляется сразу ко всем , а не к тому под которым скрывается tbody

Answer 1

[Дмитрий Комчев]

$(function () {
            const tableHead = $(".tableHead");

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

Comments

[ngapp]

Круто-круто! А как добавить появление класса coactive?

[Дмитрий Комчев]

ngapp,

$(this).find('#collapsible').toggleClass("coactive");