Streaming live at 10am (PST)

Pager or Show More Button?


#1

Hello,

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


Load more button
Dynamically load and append more items from a collection?
#2

Hi @Alaa

Pagination is hopefully on the 2018 roadmap - and admin have provided a quick workaround for making your own pagination here: https://wishlist.webflow.com/ideas/DESIGNER-I-8

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


#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).


#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

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…


#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.