A simple static jQuery load more plugin that hides overflowing elements in an HTML container and reveals the hidden items on demand.
See the basic example of load more.
<div class="col-lg-3 col-sm-4 col-xs-12 target-load-element">
<div class="card">
<img class="card-img" src="dist/img/placeholder_card.jpg" alt="Card image cap">
</div>
</div>
...
<div class="col-lg-3 col-sm-4 col-xs-12 target-load-element">
<div class="card">
<img class="card-img" src="dist/img/placeholder_card.jpg" alt="Card image cap">
</div>
</div>
/*Load More*/
$(".target-load-element:gt(3)").hide();
$(document).on("click",'.load-more',function (e) {
e.preventDefault();
$($(this).data('target')).find(".target-load-element:hidden").slice(0, 2).fadeIn('fast');
if($(".target-load-element:hidden").length == 0) {
$(this).text("No Content").addClass("disabled");
}
});