JS Query для переключения строк таблицы не работает

Question

У меня есть следующая HTML-страница

$('.header').click(function(){
    $(this).nextUntil('tr.header').slideToggle(1000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="0">
  <tr  class="header">
    <td colspan="2">Summary 1</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr class="header">
    <td colspan="2">Summary 2</td>
  </tr>
  <tr>
    <td>date</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr class="header">
    <td colspan="2">Summary 3</td>
  </tr>
  <tr>
    <td>date</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
</table>

при нажатии на .header ряды не разрушаются и не раскрываются. Я пробовал в последних версиях Firefox, IE и Chrome ... это не сработало.

я что-то пропустил... плохо знакомы с JS/JQuery и т. д..

Answer 1

Для лучшего использования я создаю класс .hidden и я переключу его на клик.

посмотри на

jsFiddle

  $('tr.header').each(function(){
    var self = this;
    $(self).click(function(){
    $(self).nextUntil('tr.header').toggleClass('hidden');
  });
});