Переключение отображения в таблице

Question

Допустим, это мой стол:

<table>
  <tr>
    <td>a</td>
    <td>one</td>
    <td>two</td>
  </tr>
  <tr>
    <td>b</td>
    <td>three</td>
    <td>four</td>
  </tr>
  <tr>
    <td>c</td>
    <td>five</td>
    <td>six</td>
<table>

Используя Javascript, я хочу иметь возможность переключать элемент display: none в строках ниже того, на который я нажимаю ... но только если я щелкаю внутри первой ячейки в каждой строке.

Например, если я щелкну по ячейке, содержащей a, tr, содержащей ячейки b, three и four, и tr, содержащей ячейки c, five и six не будет отображаться, пока я не нажму на него снова. Однако нажатие one или two ничего не изменит.

Таблица, в которой я собираюсь использовать этот код, гораздо больше.

Answer 1

С jQuery это действительно просто:

$("table tr td:first-child").click(function() {
    $(this).parent().nextAll().toggle();
});

Я обновлю свой ответ простым ответом JavaScript, если найду его.

Answer 2

Использование jQuery:

jQuery('table').find('tr').find('td:first').click(function() {
    jQuery(this).parent().next().toggle();
});

http://jsfiddle.net/