Access Collection Data for filter with anchors

Hi,

I built a filtering function with the finsweet library for my website (CMS Filter for Webflow - No-code using Attributes). Items are not visible when their respective filter is not active.

I would like to change that. When a filter gets selected, I want the page to jump to the first collection item with the respective value with an anchor.

I am struggling to access the collection data in custom code. The filter is city based and I am clueless how to import that data right now.

Thankful for any tips.

Thank you and Best,
Nik


Here is my site Read-Only: [LINK](Webflow - Neu Casting)
(how to share your site Read-Only link)

Hi @nik_meixner

If I understand correctly, you just want a dropdown menu (previously your filters), to link to a specific place on the page, right?
If so, here is a great tutorial:

1 Like

Hey Aviv,

thank you, thats what I need!
I am just curious how to do that dynamically based on CMS Collection values?

Each item in the collection has a city value. The anchor should be set to the first item with respective value. Is it possible to fetch that value and add as id?

Thanks,
Nik

So, there are a few ways of doing this:

  1. Create a separate lists for each city, and filter it so it shows only the relevant city. Now put all these lists on after the other, and give each its unique ID.
  2. Another option is to add custom code that divides the elements in the list according to their city.
  3. One more option is to add s small HTML element to each item:
    <div id="{SLUG}"></div>
    This way you create a div with a unique ID for every item and link an anchor to it
1 Like

Thank you once more for the amazin insights!
There is one obstacle after another though…

I picked option 3 and created a div in every element with city value (only first item of this value group will actually have it). The values in the dropdown are now hard coded.

Within the native page section dropdown i do not have the option to pick my new created divs - and using #City_name in the url field is not working either so far…

Do you have any more suggestion? Feel free to check the read only link (Im working on Home2)

image

Got it! Disabled the display of the div and that was causing the error!

I have to reopen the issue. My Custom Code for the anchor links (and also the filtering) on mobile is not working. Any idea why that is?

I looked for answers already but can’t find something similar.

Thanks & Best,
Nik