Show/hide rows with jquery
- by Mike
Hi I am using some modified code from another post. Basically I want to switch between showing 10 rows of a table to showing all rows (50 for example). I have got it to show from 10 rows to all, however what I need to do now is code it so that if I click the div again it toggles or resets back to showing 10 rows.
<script type="text/javascript">
var numShown = 10; // Initial rows shown & index
var numRows = $('tbody').find('tr').length;
var numLeft = numRows - numShown;
$(document).ready(function(){
// Hide rows and add clickable div
$('tbody')
.find('tr:gt(' + (numShown - 1) + ')').hide().end()
$('#table_wrapper').after('<div id="more">Show all offers <span>(' + numLeft + ' more)</span></div>');
$('#more').click(function(){
numShown = numShown + numRows; // 7 + 1 = 8
$('tbody').find('tr:lt('+numShown+')').show();
$("#more").html("Show top 10 offers");
})
})
</script>
