How to use 2 "Load More CMS items" Button on the same page

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