Show row after pressing button

Question

I want to show Row #1 on default and then when you press the "load more" button, load another row each time. I already have the content in the rows (no need for AJAX) but I just want to be able to show it when the button's pressed.

Answer 1

See this jsFiddle example.

The JavaScript part, with jQuery:

$('#loadmore').click(function(){
     $('tr.hide').first().removeClass('hide').addClass('show'); 
});

Answer 2

Use display: none; by default on all rows (except row #1).

Then on each click, use .show() on the given row or :

$('BUTTON_SELECTOR').click(function(){
    $('ROWS_CONTAINER_SELECTOR:hidden:first').show();
});

Answer 3

If you already have the data then you can simply set the container div to overflow: hidden and resize it to display an extra row with each click.

$("#button").click(function(){
   $("#container").css("height","+=150");
});