Question

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;
  $('tbody').find('tr:lt('+numShown+')').show(); 
  $("#more").html("Show top 10 offers");
 })
})
</script>

Answer 1

This is one of the uses of the .toggle() method:

$('#more').toggle(
           function(){
             numShown = numShown + numRows;
             $('tbody').find('tr:lt('+numShown+')').show(); 
             $("#more").html("Show top 10 offers");
           }, function() {
             // set the local vars you need here
             $('tbody').find('tr:gt('+(numShown-1)+')').hide();
             $('#more').html('Show all offers <span>('+numLeft+' more)</span>');
           });

Since there’s no markup I’m not sure if that’s exactly what will work with your setup, but the point is to reset the rows in their initial state in the second function of toggle()