Question

I found this online and it works exactly as I’d like it to.

However, I would like to use 2 Tables of separate content, and not just one.

Is it possible to have the same ‘See 5 More’ functionality, but with 2 separate tables?

How is this achieved?

Here is the JavaScript for reference:

<script type="text/javascript">
var numShown = 5; // Initial rows shown & index
var numMore = 5; // Increment
var numRows = $('table').find('tr').length; // Total # rows

$(document).ready(function(){
 // Hide rows and add clickable div
 $('table')
  .find('tr:gt(' + (numShown - 1) + ')').hide().end()
  .after('<div id="more">Show <span>' + numMore + '</span> More</div>');

 $('#more').click(function(){
  numShown = numShown + numMore;
  // no more show more if done
  if ( numShown >= numRows ) $('#more').remove();
  // change rows remaining if less than increment
  if ( numRows - numShown < numMore ) $('#more span').html(numRows - numShown);
  $('table').find('tr:lt('+numShown+')').show();
 })

})
</script>

Many thanks for any pointers.

Answer 1

var numShown = 5; // Initial rows shown & index
var numMore = 5; // Increment
$(document).ready(function() {
    // Hide rows and add clickable div
    $('table').find('tr:gt(' + (numShown - 1) + ')').hide().end().after('<div class="more">Show <span>' + numMore + '</span> More</div>');

    $('.more').click(function() {
        var numRows = $(this).prev().find('tr').length; // Total # rows
        shown = $(this).prev().find('tr:visible').length + numMore;
        // no more show more if done
        if (shown >= numRows) $(this).remove();
        // change rows remaining if less than increment
        if (numRows - shown < numMore) $(this).find('span').html(numRows - shown);
        $(this).prev().find('tr:lt(' + shown + ')').show();
    });
})​;

working example:
http://jsfiddle.net/cTuQ4/