Load more

A simple static jQuery load more plugin that hides overflowing elements in an HTML container and reveals the hidden items on demand.

Basic example

See the basic example of load more.

Card image cap
Card image cap
Card image cap
Card image cap
Card image cap
Card image cap
Card image cap
Card image cap
Card image cap
														
<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");
	}
});