CODEWITHSUNDEEP
javascriptjqueryhtml
Klapsius
Klapsius

Reputation: 3369

Collapse expanded html tables

I took example of HTML table and jQuery script and I'm trying to change behaviour this combination. Currently table rows are expanded and collapse on click. How change this to be collapsed and expand on 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

Upvotes: 2

Views: 58

Answers (2)

zer00ne
zer00ne

Reputation: 44088

In order to have collapse to expand behavior, hide the rows initially:

 $('.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>

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337713

To reverse the default state you simply need to remove the expand class from the .header elements and set display: none on the standard tr elements. The JS logic is otherwise identical.

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

tr {
  display: none;
}

Updated fiddle

Upvotes: 2

Related Questions