Pager or Show More Button?

Publishing help General
1

Hello,

2
21199×388 27.6 KB
1
11199×388 26.6 KB

Is there a way to make a show more button or a pager for cms data.

1 Like
2

Hi @Alaa

Pagination is hopefully on the 2018 roadmap - and admin have provided a quick workaround for making your own pagination here: Paginate Collection Lists | Webflow Wishlist

As for ‘show more’ with cms data - that sounds like it should work, although i’ve not tried it.

Div - collection list inside - initially invisible - then make an interaction for the show more button to reveal/hide the Div.

Legacy interactions tutorial (scroll to example 3) on show/hide here: http://interactions.webflow.com/

Hope that helps?

3

Hi StuM,
Thanks for your reply.
Does the “Show more” button works even if I have a lot of thumbnails?

Thanks.

4

I don’t see why not - if you target the button at a div, then whatever that div holds, should show/hide.

As I say, i’ve not tried it/with a collection list before - those are limited to 100 items at a time, but you can add multiple lists and set them to show 1-100 and 101-200 etc

Just bear in mind page loading times, and keep those thumbnail images nice and small/optimised for web…

Let us know how it goes!

5

Quick question – just want to know if there is an easy built-in way to make See More buttons, like what is at the bottom of the Webflow templates selections, that dynamically append elements from a collection.

Untitled%20picture
Untitled%20picture1212×756 343 KB

6

There’s a dirty way to do it by adding an unlimited Collection List and fold it behind a See more button. It’s going to be a one click thing, not an increment of a few lines by few lines.

7

Well if we’re using custom code we can definitely split up the long list into multiple shorter loads, and even add a delay to the click so it appears that it’s trying to grab more items from the server (non-instant illusion).

1 Like
8

You wouldn’t happen to familiar with any code examples of where someone has dynamically loaded items from a collection would you? I’m a coder – it would be a great jump start just to see where someone has done something similar

9

Hi, I am just putting together a proposal for a new website, of course using webflow, and wonder if anyone has successfully implemented this https://codepen.io/elmahdim/pen/sGkvH load more function. I need to keep the pages pretty clean it will be cms based. I want to show say 4 items then load more at the request of the visitor. Any help and advise on how to get this to work in webflow using cms would be appreciated. Thanks

10

Hi @RoseWebStudio

Similar request here with a link to the legacy interaction show/hide tutorial which I think you could take some of the principles from: Pager or Show More Button?

I’ve not tried to build this, but think it is do-able natively:

  • ‘Show more’ button to reveal a hidden div with the first 4 items from CMS plus a ‘show more’ (2) button.
  • ‘Show more’ (2) button clicks to reveal the next hidden div with items 5-8 plus a ‘show more’ (3) button…
  • Repeat as desired

That will leave the ‘show more’ buttons displayed for each set of 4 but you could add further interactions to hide them, or leave them as show/hide - so the user could expand and collapse each set of 4 individually?

If that all works, adding some easings and slight delays to the individual items could help achieve the slickness of the codepen you mentioned…

1 Like
11

Thanks mate. Seems like a lot of work and maintenance:( need to keep thinking and trialing I think. If you have any further thoughts let me know. Take care

12

This topic was automatically closed after 60 days. New replies are no longer allowed.