How to filter collections only on breakpoint

Hi fellow Webflow’ers,

I’m trying to use some filters of a collection list item only on a certain breakpoint. Is this possible?

I know I can duplicate the hole collection and use other filters and use the display function to show and hide this, but I don’t think this is the best way, because even if it is on display: none;, it still needs to be loaded and this will have impact on the loading time.

Are there other solutions?

Hello @Codenee

if($(window).width() < 992) {
    add your filters code here. 
    this will work on tablets and mobiles phone. Just add screen size number instead of 992

}```

Let me know if you need any help.
1 Like

I think it is still not the solution I am looking for.

I have a switch in a collection for highlighting an item. I want to only let the switch filter work on desktop.

You can add dynamic script-based filtering here,

I’m rethinking some of the requirements and how to make certain features more accessible, but at the moment you’d add the library references as described in the doc, and then add a custom attribute to your Collection Item element of;

wfu-filter-func = filterFunc

And you’d write your filter function in the </body> custom code. It would look something like;

function filterFunc(elem) {
  if($(window).width() < 992) {

    if ( CONDITION TO HIDE THIS ITEM )
      return false; // hide this item at this breakpoint

  }
  return true; // make this item visible 
}

If you get stuck, you can share your readonly link and we may be able to help.

Its not the hole dynamic list that i want to hide. I want to have the switch element thats in the cms filtering only on desktop

Yes, this filters only individual items, that you choose to filter out.