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>