Question

Here’s what id like to do. I have a table with a bunch of rows. I want only the first 1 to be shown, the rest will be styled with a display:none. Theres going to be a link that when click, will remove the display:none off of one additional row. Here’s what i got so far http://jsfiddle.net/dBdV7/ .

Problems:

1. First of all, it says loadmore is not defined.. why?
2. How do i get the load more link to go away once all the rows are showing?
3. Im nt sure if that slice will work properly but it what im trying to do is limit the selected to children to just one .
4. And finally, i manually added the hide_row classes, how can jquery automatically add it to all the children of the table onload except the first one?

Answer 1

EDIT:

To load more than one tr (two by two or more…) find the demo in my comment below the answer.

jsFiddle demo

Thanks to @Lix for the comment: to ADD/VIEW the next rows – than just use this jQuery:

var curr = 0;
var rowN = $('.main_table tr').length;

$('.main_table tr').eq(curr).siblings().hide();  // no need for CSS

$('a.load_more').on('click',function(e){
    e.preventDefault();   
    $('.main_table tr').eq(++curr).show();
});

---

BEFORE:

jsFiddle demo

I created a nice script that will allow you to loop!

That means if at some point you reach the last tr it will bring you back to the 1st one!

HTML:

<table class="main_table">
    <tr><td>Row 1</td></tr>
    <tr><td>Row 2</td></tr>
    <tr><td>.....</td></tr>
</table>

<a class="load_more" href="#">Click to load another row</a>

jQuery:

var curr = 0;                     // set desired starting one (zero based)!
var rowN = $('.main_table tr').length;

$('.main_table tr').eq(curr).siblings().hide(); // hide all but current one

$('a.load_more').on('click',function(e){
    e.preventDefault(); // prevent default anchor behavior

    ++curr;
    if(curr===rowN){curr=0;} // reset to 0 at some point

    $('.main_table tr').eq(curr).show().siblings().hide();
});