Updating filter count on multiple lists with a tab/toggle

Finsweet Components
,
1

Description

Hi! I’m new to Webflow and Finsweet and have inherited a project using Finsweet CMS filters on an events page. My goal is to add two tabs to the top of this to filter between two versions of the CMS page to further help make things easier to find.

I’ve added two toggle buttons that switch between two different CMS lists using javascript. The toggling and filtering work as expected, but I’m stuck on updating the “Showing X of X experiences” text dynamically based on the active list and its filters. I want it to be able to do something like:

If you’re on the Full list, unfiltered it shows: “38 of 38 experiences”
If you’re on the Shorter list while filtering it shows: “3 of 9 experiences”

For example and so on and so forth.

I initially tried using multiple Finsweet instances and toggling the results count along with the lists, but it doesn’t seem to sync correctly. (Possibly because this is still using the old v1 cmsfilter version?)

I’m also considering using the Javascript API to manually update the results and full list count, but not sure the best way to implement this.

Hoping a Finsweet expert here can help point me in the right direction. Thanks in advance!

Here is the staging site of what I’m working on for more context: Volunteer Experiences Toggle Test

2

Hey @cassi.gallagher-shea!

I see what’s happening with your toggle setup. You’re using CMS Filter v1, but with the v2 instance naming convention. Unfortunately, this won’t work, as Attributes v1 and v2 aren’t compatible on the same page.

We have two options:

  • Stick with v1: Update the instance naming to match v1 (e.g., fs-cmsfilter-element="list-2", fs-cmsfilter-element="filters-2", fs-cmsfilter-element="results-count-2", etc.), and add custom JS if needed.

  • Upgrade to v2: Migrate the whole setup to v2 and use the fs-list-instance naming convention you’re already using for the results count.

Would you like me to provide more specific implementation details? @Support-Luis or @Support-Pedro can also help with the custom code solution if needed.