Create a show more button to show all CMS records

Hi,

First post here so any issues with the post do let me know, also I’m still new to Webflow.

My issue

I have an FAQ collection list with 13 records, I have limited the records to 8 but naturally I’m going to need to show all records for this I want to create a show more button that when clicked shows all records.

Here is what the FAQ page looks like

image

Given the current state of Webflow, is this possible to do within Webflow?

Hey, do you have a share link?

the first cms list is limited to 8 I think?
Cant, you place a second cms list that starts from 8 without a limit?
Then make the second cms list visible when you click the button?

let me know if this helps and if you have a share link I could make a screen capture for you :slight_smile:

Gr Kees kroon

Yeah so currently it’s limited to 8.

Here is the read-only share link

https://preview.webflow.com/preview/common-energy?utm_source=common-energy&preview=1167ee1632e67a31f03b7d0e3a30cffa

It’s the FAQ page where I want this to occur.

Hey so did you try my suggestion?

I did but the toggle animations don’t seem to be moved over, so the three “show more” items are open and not closed.

If you take a look at the FAQ page, you’ll see what I mean.

in your share link al the FAQ are opened

I know, that’s what I said above, but they should be closed.

so the three “show more” items are open and not closed.

thats what you said you didnt say there were al open could you make a roll back so it looks like the screenshot you posted before

think i fixed it will give you to the screen capture soon :slight_smile:

Hey @benbagley

This can be achieved by using a 2nd faq collection list with no limits set. Add an interaction to the show more button that hides the 1st collection and displays the 2nd. Of course you can add more to the interaction to smooth it out and make it snazzy.

This would allow you to show up to 100 faqs. Hope that helps. Happy designing!

There all open now because I’m playing around with the animation trying to get it to work, I can’t just wait around for a response that would be absurd, if I revert the animation then only the three show more items are open, the rest are closed.

I’ve reverted the changes so you should see the issue yourself now.

But if you do come up with some help or solution that would be very appreciated.

EDIT
I’ll wait for the screen capture

That’s what I’ve done, it’s just the animations aren’t working on the second collection.

@benbagley

Sorry I skimmed through the topic too quickly. Just opened up the project to take a look. A few things I noticed will smooth this out.

Move the trigger interaction to the FAQ base and apply the interaction to all elements with that class.

The inside the show and hide interactions, apply the animations to all children elements with that class.

Also it would be good to show/hide the button as well. You could also create a “show less” button that reverses the show more interaction.

Below is the result. The key is that the trigger needs to be a parent or sibling of the elements being affected in order to isolate the interaction to just one of the collection items.

i tried it to i had to remake the animations dont know why they cant be copied :s

Oh ok I got you. All working now, thanks :slight_smile:

1 Like

:+1: Always glad to help when I can.

How can you do this if you are using a multi-ref collection? It only allows item limit and you cannot start a second collection from another specific item number.

Looks like mult-refs dont allow for the same form of nuance as work done in a collection. I found a nice workaround in this thread from KevinHandy

Workaround