jensvahle
(jvahle)
September 8, 2019, 2:00pm
1
Hey, there I’m using the following custom code for a load more button and it works like a charm. However I’d like to use two buttons on the same page (for two different collection lists) and i can’t get it to work, it seems to be conflicting with each other.
Is this possible? If yes, how would I implement this with custom code?
Thanks a lot.
Best,
Jens
Hi @jensvahle ,
I was struggling with the same thing and luckily a friend of mine helped me out with adjusting the code to run based on class names. Hope this helps.
<script>
$(function() {
$lis = $('.blog-page-post');
min = 1;
max = $lis.length;
var visible = min;
function showUpToIndex(index) {
$lis.hide();
$lis.slice(0, index).show();
}
function disableButtons() {
if (visible >= max) {
visible = max;
$('.button').hide();
} else {
$('.button').show();
}
}
showUpToIndex(visible);
disableButtons();
$('.button').click(function(e) {
e.preventDefault();
visible = visible + 2;
disableButtons();
showUpToIndex(visible);
});
});
$(function() {
$lis2 = $('.blog-page-post-2');
console.log($lis2);
min = 1;
max = $lis2.length;
var visible = min;
function showUpToIndex(index) {
$lis2.hide();
$lis2.slice(0, index).show();
}
function disableButtons() {
if (visible >= max) {
visible = max;
$('.button-2').hide();
} else {
$('.button-2').show();
}
}
showUpToIndex(visible);
disableButtons();
$('.button-2').click(function(e) {
e.preventDefault();
visible = visible + 2;
disableButtons();
showUpToIndex(visible);
});
});
</script>
1 Like