Jquery Load More Content Onclick

This is what I have so far: $(document).ready(function(){ $('#feed-page').load('feed.php #first-feed'); $('.feed-load').click(function(){ $('#feed-page').load('feed.

Solution 1:

The issue with your current code is that after the user clicks the button, you are loading the new data over the existent one. See jQuery .load().

What you need is to append the new data, in order to preserve the existent one:

// on click
$('.feed-load').click(function(){   

  // load the new data to an element
  $("<div>").load("feed.php #second-feed", function() {

    // all done, append the data to the '#feed-page'
    $("#feed-page").append($(this).find("#second-feed").html());

    // call your functionhideLoading();
  });

  // continue the remaining of your code...
  $(".feed-load .button-content").css( "display" , "none" );
  $('.feed-load-img').css( "display" , "block" );
});

---

EDITED

Append with some animation as requested at the comment:

...
// all done, append the data to the '#feed-page'var $html   = $(this).find("#second-feed").html(),
    $newEle = $('<div id="second-feed" />').attr("style", 'display:none;').html($html);

$("#feed-page").append($newEle);
$('#second-feed').slideToggle();
...

See this Fiddle Example!