Add mini pager and infinite scroll to a view

Question

I have a view where at first 1 item has to show. On click of 'load more' next item has to show and so on. For this i have installed 'infinite scroll module' in drupal 8. Now after showing four items, 'load more' has to change to ' show less' and hide all four items. I am not sure how to do this as infinite scroll module doesn't have this option.

Also, once there are four items are displayed, pagination with 'next' (on click showing next 4 items) has to appear.

I am not sure how to do this. Any help will be appreciated.

Answer 1

You're description is a bit ambiguous because first you write

Now after showing four items, 'load more' has to change to ' show less' and hide all four items

but then below you write

Also, once there are four items are displayed, pagination with 'next' (on click showing next 4 items) has to appear.

Sounds to me like once there are 4 items displayed, you want to have a show less AND a next button to be displayed?

What's safe to say though, is that you can't get that show less button using views infinite scroll.

I'd probably try to add pagination using views infinite scroll that shows/loads additional 4 items when you click the load more button. The show less button you'll probably have to implement as custom JS wrapped inside a Drupal behavior .

You may also consider to override the JS behaviors of the views_infinite_scroll module to achieve the show more/show less functionality if it's not possible in a custom behavior because you depend on views_infinite_scroll's JS code to run first or so