Duplicate fs-list-instance not filtering CMS items correctly across two sections

Attributes
1

Hello,

I’d like to separate my two collection tabs using this animation setup from Finsweet: List Tabs - Create Tabs with CMS Collections Lists in Webflow, so that the products from the second collection appear only in the second section.

I’ve properly separated the two categories in my CMS page:

However, I can’t seem to get the filter to apply correctly, and the Icom products are currently showing up under the Motorola range:

I did add the custom attributes fs-list-instance with two different instance IDs, but the issue remains.

Could you please help me fix this by applying the correct filters?

Thank you so much,
Romane

2

Hi @vedelromane!

I took a look at your page and I noticed some mistakes in the set up:

  • Remove fs-list-instance="Gamme 1" from the element with class “Tabs Menu 2”
  • Remove fs-list-instance="2" from the element with class Collection List 4

Fix incorrect attributes on both Tabs:

  • On Tabs 2, change fs-cmstabs-element to fs-list-element
  • On Text Block 3, change fs-cmstabs-element to fs-list-element

Let me know once you’ve made this changes or if you run into any issues!

3

Hello Pedro,

Thank you so much for your reply.

I just updated the mentioned attributes, however, it broke the tab animation.
Could you please help me fix it?

here is the staging link updated : CTM

Thanks a lot,
Romane

4

I’m sorry I missed this part in the last message.

Replace the CMS Tabs script with the new script:

<!-- Finsweet Attributes -->
<script async type="module"
src="https://cdn.jsdelivr.net/npm/@finsweet/attributes@2/attributes.js"
fs-list
></script>

And make sure all the Attributes are fs-list-element

Let me know how it goes!

5

It’s working ! Many thanks for your help !!

1 Like