Dynamically Create Load More Button

Question

Trying to cobble together some code to create a "Load More" button for a JSON array i'm pulling down and dynamically populating the page with, using the jquery slice method. Still terrible at jquery would appreciate any assistance with this. Thanks so much.

Code:

function populateButtons(data) {
    var rightcontent = $(".rightcontent");
    var sub = document.createElement("a");
    var gh_buttons =  $(".rightcontent a")
    sub.innerHTML = data.title;
    sub.setAttribute("href", data.absolute_url);
    sub.setAttribute("target", "blank");
    sub.setAttribute("class", "hidden");
    $(rightcontent).append(sub);
    setTimeout(function() {
        $(gh_buttons).slice(0,10).removeClass("hidden");
    }, 100);
}
var populateButtons = gh_loadMore;
gh_loadMore = function() {
    var loadMore = function() {
        $(rightcontent).after("<button>Load More</button>");
    };
    $(loadMore).on('click', function (e) {
    e.preventDefault();
    $(gh_buttons).slice(10, 10).slideDown();
    $('html,body').animate({
        scrollTop: $(this).offset().top
    }, 1500);
    });
};
gh_loadMore();

Answer 1

There is an order problem for your code, you can implement like following.

function populateButtons(data) {
    var sub = document.createElement("a");
    sub.innerHTML = data.title;
    sub.setAttribute("href", data.absolute_url);
    sub.setAttribute("target", "blank");
    sub.setAttribute("class", "hidden");
    $(".rightcontent").append(sub);

    var gh_buttons =  $(".rightcontent a");
    setTimeout(function() {
        $(gh_buttons).slice(0,10).removeClass("hidden");
    }, 100);
}

var gh_loadMore = function() {        
    $(".rightcontent").after("<button id='btn'>Load More</button>");
};

populateButtons(yourdata);  // call it with yourdata variable  
gh_loadMore(); 

$("#btn").on('click', function (e) {
     e.preventDefault();
     $(".rightcontent a").slice(10, 20).removeClass("hidden");
     $(".rightcontent a").slice(10, 20).slideDown();
     $('html,body').animate({
         scrollTop: $(this).offset().top
     }, 1500);
});