Свернуть развернутые таблицы HTML

Question

Я взял пример таблицы HTML и сценария jQuery, и я пытаюсь изменить поведение этой комбинации. В настоящее время строки таблицы раскрыты и свернуты на click. Как изменить это, чтобы свернуть и расширить на click.

$('.header').click(function() {
  $(this).toggleClass('expand').nextUntil('tr.header').slideToggle(100);
});

table,
tr,
td,
th {
  border: 1px solid black;
  border-collapse: collapse;
}

tr.header {
  cursor: pointer;
}

.header .sign:after {
  content: "+";
  display: inline-block;
}

.header.expand .sign:after {
  content: "-";
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table border="0">
  <tr class="header expand">
    <th colspan="2">Header <span class="sign"></span></th>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr class="header expand">
    <th colspan="2">Header <span class="sign"></span></th>
  </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>

Fiddle

Answer 1

Чтобы изменить состояние по умолчанию, вам просто нужно удалить класс expand из элементов .header и установить display: none для стандартных элементов tr.В остальном логика JS идентична.

tr.header {
  cursor: pointer;
  display: table-row;
}

tr {
  display: none;
}

Обновленная скрипка

Answer 2

Чтобы иметь разворачивание для расширения поведения, сначала спрячьте строки:

 $('.header').nextUntil('tr.header').hide(); 

$('.header').nextUntil('tr.header').hide();
$('.header').click(function() {
  $(this).toggleClass('expand').nextUntil('tr.header').slideToggle(100);
});

table,
tr,
td,
th {
  border: 1px solid black;
  border-collapse: collapse;
}

tr.header {
  cursor: pointer;
}

.header .sign:after {
  content: "+";
  display: inline-block;
}

.header.expand .sign:after {
  content: "-";
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table border="0">
  <tr class="header expand">
    <th colspan="2">Header <span class="sign"></span></th>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr class="header expand">
    <th colspan="2">Header <span class="sign"></span></th>
  </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>