Show/hide rows with jquery

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

$(some_selector) returns a list of matching elements. You can call .slice() on them, and do whatever you want on each of the elements. Note that the items in the list are not jquery objects, but the default DOM objects (those you get from the getElementBy... methods). You can either work on these or do $(domobject) to get a jquery object again.

Answer 2

Try this:

$('#more').click(function(){
    if(numShown <= 10)
    {
        //show some more
        numShown = numShown + numRows;
        $('tbody').find('tr:lt('+numShown+')').show(); 
        $("#more").html("Show top 10 offers");
    }
    else
    {
        //hide some rows
        numShown = 10;
        $('tbody').find('tr:gt('+numShown+')').hide(); 
        $("#more").html("Show more");
    }
})

Answer 3

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()

Answer 4

I prefer to use addClass() to hide rows, by adding a class styled with display: none; in my CSS stylesheet. Then to show the previously hidden rows, all I've to do is select the rows with this class and remove the class from them. Sth like:

$('.hidden_row').removeClass('hidden_row');