Billy Billy - 3 months ago 23
CSS Question

How to show more than one table row on click

I have 5 rows accompanied with a display button from when clicked I would like to display two of the hidden rows at a time. I would then like the display button to become disabled once the last 2 rows have been displayed.

This question is very similar to this question except I cannot use the answer because the display:block css alters the data and styling within the row.

<p><a href="#" id="display">Display More</a></p>

<table>
<tr class="showfirstRow">
<th>First Name</th>
<th>Last Name</th>
</tr>
<tr class="secondRow">
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr class="thirdRow">
<td>Lois</td>
<td>Griffin</td>
</tr>
<tr class="fourthRow">
<td>Meg</td>
<td>Griffin</td>
</tr>
<tr class="fithRow">
<td>Stewie</td>
<td>Griffin</td>
</tr>
</table>


$("#display").click(function() {
// show the next hidden div.group, then disable the display button once all rows have been displayed
});

Answer

Added a hidden class to use for hide elements.

You can find the next X elements that are hidden inside the table (using slice(0,2), you can use there any number you would like), remove the hidden class of them, and if there are no more hidden elements inside the table - add the hidden class to the button you just clicked (to hide it).

Here is an example:

$("#display").click(function() {
  $('#tblWithHiddenRows .hidden').slice(0, 2).removeClass('hidden');
  if ($('#tblWithHiddenRows .hidden').length == 0) {
    $(this).addClass('hidden');
  }
});
.hidden {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><a href="#" id="display">Display More</a></p>

<table id="tblWithHiddenRows">
 <tr class="hiddenfirstRow">
  <th>First Name</th>
  <th>Last Name</th>
</tr>
 <tr class="secondRow hidden">
  <td>Peter</td>
  <td>Griffin</td>
</tr>
<tr class="thirdRow hidden">
  <td>Lois</td>
  <td>Griffin</td>
</tr>
<tr class="fourthRow hidden">
 <td>Meg</td>
 <td>Griffin</td>
</tr>
<tr class="fithRow hidden">
 <td>Stewie</td>
 <td>Griffin</td>
</tr>
</table>