title: Show/hide rows with jquery
body: <p>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.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  var numShown = 10; // Initial rows shown &amp; 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('&lt;div id="more"&gt;Show all offers &lt;span&gt;
       (' + numLeft + ' more)&lt;/span&gt;&lt;/div&gt;');
  
   $('#more').click(function(){
    numShown = numShown + numRows;
    $('tbody').find('tr:lt('+numShown+')').show(); 
    $("#more").html("Show top 10 offers");
   })
  })
  &lt;/script&gt;
  </code></pre>