<script>
jQuery(document).ready(function () {
size_li = jQuery(".inventory article").size();
x=8;
jQuery('.inventory article:lt('+x+')').show();
jQuery('#loadMore').click(function () {
x= (x+4 <= size_li) ? x+4 : size_li;
jQuery('.inventory article:lt('+x+')').show();
jQuery('#showLess').show();
if(x == size_li){
jQuery('#loadMore').hide();
}
});
jQuery('#showLess').click(function () {
x=(x-4<0) ? 8 : x-4;
jQuery('.inventory article').not(':lt('+x+')').hide();
jQuery('#loadMore').show();
jQuery('#showLess').show();
if(x == 8){
jQuery('#showLess').hide();
}
});
});
jQuery(document).ready(function () {
size_li = jQuery(".inventory article").size();
x=8;
jQuery('.inventory article:lt('+x+')').show();
jQuery('#loadMore').click(function () {
x= (x+4 <= size_li) ? x+4 : size_li;
jQuery('.inventory article:lt('+x+')').show();
jQuery('#showLess').show();
if(x == size_li){
jQuery('#loadMore').hide();
}
});
jQuery('#showLess').click(function () {
x=(x-4<0) ? 8 : x-4;
jQuery('.inventory article').not(':lt('+x+')').hide();
jQuery('#loadMore').show();
jQuery('#showLess').show();
if(x == 8){
jQuery('#showLess').hide();
}
});
});
</script>
<div id="loadMore">Load more</div>
<div id="showLess">Show less</div>
ex. http://jsfiddle.net/cse_tushar/6FzSb/2/
Leave a Reply