I am using the view core module to view the featured articles, latest articles and more stuff in my project, it is rendering 3 articles and the load more button to load more content using ajax, This is working great in Desktop, However in Mobile, the load more button doesn't exist (As per website design) and the articles are displayed in a slider. I am hiding load more button using CSS, the user has no way of loading more content!!

1st Approach: Load more content using ajax.

How can I automatically load more content after the user slides 2 or more slides ? I can easily detect when the user slides to the 2nd slide using jquery but how can I load more slides dynamically using ajax? Do I have to load more content by myself or does Drupal 8 have a way of doing this?

2nd Approach: Make 2 blocks, one for desktop, one for mobile.

I thought of doing 2 separate views blocks:

Desktop view block: 3 items and load more button

Mobile view block: all items

But this doesn't feel right, and I will have to toggle between them using CSS which means the content will be fetched by network anyway, So this approach is not correct.

I could not find how to hide or show a block depending on view width without CSS.

If there is another approach please tell me.

2 Answers 2


Maybe can you detect with jQuery that the user's screen is near the bottom of the page (or with your 1st approach), then you use an .click() on your invisible "load more" button ? In that way, user will scroll and more content will appear each time ?

  • I don't think that you have fully understood my question, I have no problem with loading more content on the desktop, what I am trying to do is load more content is a mobile slider without having the load more button. Commented Nov 8, 2017 at 8:35
  • This is why I say that if your more button is hidden, you only have to generate a false user click on this invisible button with jQuery when the user is near the bottom. It means 1 - detect that the user is looking the bottom / 2 - simulate a click on the invisible more button
    – Seldell
    Commented Nov 8, 2017 at 9:32
  • It worked, I ended up doing jquery function that checks for the last item in the slider is active, then click on the load more button, I had to reinitialize the slider again to make it work, thanks... Commented Nov 8, 2017 at 15:23

You should look at the views_infinite_scroll project. It has the option to not display a Load More button and just autopage when the end of the list is reached. Just specify it as the pager in your view and select options from there.

You could either have two different views or maybe just refactor the desktop to not have a load more button and use the auto load like the mobile display.

  • In the design I have 3 blocks on the same page for example ( Featured articles - Most viewed - Latest ), so I cannot depend on automatic scrolling in desktop I need the load more button , I looked at the infinite scroll js file it is simulating a click on the load more button when the user scrolls down, maybe I can also simulate a click when the user goes to the 3rd slide or so, what I am trying to do now is to make the load more button adds slides to the end of the slider instead of adding more articles under the slider. Commented Nov 8, 2017 at 8:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.