Skip to content

Instantly share code, notes, and snippets.

@aliboy08

aliboy08/simple-load-more-js

Last active October 2, 2018 23:15
Show Gist options
  • Save aliboy08/781db5f9d7c3a5adcb7b9f38b9a3af90 to your computer and use it in GitHub Desktop.
Save aliboy08/781db5f9d7c3a5adcb7b9f38b9a3af90 to your computer and use it in GitHub Desktop.
Download ZIP
Simple Load More JS
Raw
simple-load-more-js
<html>
<head>
<style>
.ff-load-more > .item {
display: none;
}
.ff-load-more > .item.active {
display: block;
}
</style>
</head>
<body>
<div class="ff-load-more" data-load-on-init=3 data-load-more=3>
<div class="item">ITEM HERE</div>
<div class="item">ITEM HERE</div>
<div class="item">ITEM HERE</div>
<div class="item">ITEM HERE</div>
<div class="item">ITEM HERE</div>
<div class="item">ITEM HERE</div>
<div class="load-more-container"><a href="#" class="btn">Load more</a></div>
</div>
<script>
(function($){
$(function(){
if( $('.ff-load-more').length ) {
$('.ff-load-more').each(function(){
var load_on_init = $(this).data('load-on-init');
var load_more = $(this).data('load-more');
var load_more_container = $(this);
// On load
ff_load_more_show_hidden_items(load_more_container, load_on_init);
// On load more button click
load_more_container.find('.btn').on('click', function(e){
e.preventDefault();
ff_load_more_show_hidden_items(load_more_container, load_more);
});
});
function ff_load_more_show_hidden_items(el, load_num){
var hidden_items = el.find('.item:not(".active")');
var i = 0;
if( hidden_items.length ) {
// have hidden items
hidden_items.each(function(){ i++;
if( i > load_num ) return;
$(this).addClass('active');
});
if( hidden_items.length <= load_num ) {
// Last set
el.find('.load-more-container').remove();
}
}
}
}
})
})(jQuery)
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment