Interactive Table Display
I am looking to create a table that shows more rows when the "View More" button is clicked. Once all rows are shown, the button text should change to "View Less" and clicking it will hide the extra rows. The functionality should be able to repeat itself.
$('table tr:lt(4)').addClass('active');
var rowCount = $('table tr').length;
$('a.load_more').on('click', function(e) {
e.preventDefault();
var $rows = $('table tr');
var lastActiveIndex = $rows.filter('.active:last').index();
$rows.filter(':lt(' + (lastActiveIndex + rowCount) + ')').addClass('active');
if ($rows.filter(':hidden').length === 0) {
$(this).html('view less').on('click', function () {
$rows.filter(':lt(' + (lastActiveIndex + rowCount) + ')').removeClass('active');
$('table tr:lt(4)').addClass('active');
});
}
});
**CSS**
table tr { display: none; }
table tr.active { display: table-row; }
HTML Example Here's an example of what the HTML table structure could look like:
<table>
<thead>
<th>head 1</th>
<th>head 2</th>
<th>head 3</th>
<th>head 4</th>
</thead>
<tbody>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
...
<tr>
<td>last row</td>
<td>last row</td>
<td>last row</td>
<td>last row</td>
</tr>
</tbody>
</table>
<a href="#" class="load_more">View More</a>