Hi!
I’m building a website for a client, and they have requested a filtering option where if I click a category, for example, ‘Logo’, not only will I see only the projects that have a ‘Logo’ but I will also see the IMG tagged ‘Logo’ as opposed to the main project image. I have figured that perhaps with conditional visibility this might be possible, but I cannot attach a condition v. based on what filter has been chosen - any ideas?
How you approach this depends partly on what you mean by “filtering.”
Are you using Finsweet’s CMS Filter or are you trying to simply navigate collection pages?
Webflow’s conditional visibility feature is conditional only to underlying CMS data, which won’t change dynamically during your filtering with a page.
What you’d need is custom code that makes your elements conditionally visible depending on the filter state. Javascript is the only way to do that reliably across a full range of browsers, so you’d need a bit of custom code.
However if you’re targeting mobile devices primarily, there might be a suitable CSS-only option using the :has() pseudoselector to detect your radiobutton state. This is unsupported in Firefox, which has 6% global desktop market share, 0% mobile.
Here’s a demo of that though for your image-swapping use case;
Hi Memetican, thank you for your reply. It is very helpful! Yes, I was going to experiment with Finsweet’s dynamic filtering. Also, aware that I need a custom code, I want to try Webflow’s native interactions and see if I can set up rules to hide/unhide the information. But will keep trying a few options until I get a solution & will keep you updated. Thank you for the demo!!
