how to add more elements on button click

Question

I have a <div> containing multiple <article>-tags. Now I want to add a button, which shows more entries by each click. Lets say I display 5 as default, then I click the show more button, then I get 10 entries, then I click again and I get 15 entries.

The HTML structure is pretty simple:

<div>
  <article> data here </article>
  <article> data here </article>
  <article> data here </article>
</div>
<button>show more</button>

Thanks in advance...

you want your articles to load dynamically every click? or you want them all to load and be merely hidden until the click? — Banana, Jul 04 '14 at 08:24

score 1 · Accepted Answer · answered Jul 04 '14 at 08:27

1

try the fiddle

$("article:gt(4)").hide();
var count =  $("article").length;

var i = 5;
$("button").on("click" , function() {
    i = i + 5;    
    $("article:lt(" + i + ")").show();
    if(i > count){
        $("button").hide();
    }
});

DEMO

answered Jul 04 '14 at 08:27

Sudharsan S

15,336
3
31
49

score 0 · Answer 2 · answered Jul 04 '14 at 08:34

Check the fiddle here:

$(document).ready(function() {


    $("#show").click(function(){
        var article_no=$("#container > article").length;
        for(i =article_no+1; i<=article_no+5; i++)
        {
            if (i>30)
                break;

            $("#container").append("<article> data here"+(i)+" </article>");
        }

    }); 
});

Hope this helps.

Note: This will show up to 30 records. You will need to modify condition as per your number of records.

how to add more elements on button click

2 Answers2