Easy Webflow Collection List Filtering!

Where we often reach for external libraries which add bulk and lack of understanding to our projects, we can write very little javascript to achieve filtering of our CMS / Collection List items in Webflow.
We even throw in a cheeky bit of GSAP here for you! gsap.com
Code: pastebin.pl/view/7e5dc6f9
Brought to you by FlowSt8.dev - The unlimited Webflow Development Service
Get started with Webflow NOW! webflow.grsm.io/vju2g2zhpv53
-
Learn to become a Full Stack Agency: thefullstackagency.xyz/
Support my content: buymeacoffee.com/fakesamgregory
Join the community: / 1737357986903753004
Services I Love
Domain Names: namecheap.pxf.io/c/3510278/38...
Hosting: www.hostg.xyz/aff_c?offer_id=...
Online Storage ($200 credit): m.do.co/c/9beb563908a1
Online Storage ($100 credit): www.vultr.com/?ref=9381598-8H
-
X: x.com/@0x5am5
-
--------------------------
⏰ Timestamps
--------------------------
00:00 - Intro
00:37 - Setting up our dev environment (more on this soon!)
01:18 - Collection overview
02:34 - Finishing setting up collection list, adding attributes
04:05 - Setting up the filtering links
06:03 - Finalising with data attributes
07:06 - Finding the elements in JavaScript
09:05 - Binding clicks to filter links
11:34 - showing/hiding correct items
14:00 - Adding GSAP
16:20 - Styling clicked filter link
My Gear (affiliate)
Sony A7 III: amzn.to/427iMbS
Sony 16-35mm: amzn.to/3Ehfvxi
VIJIM Video Light: amzn.to/3N0XdFp
Hollyland Mark M1: amzn.to/3MIZmUW
Macbook Pro M1 Pro: amzn.to/3oEVbS0
iPad Pro 2018: amzn.to/3AxJWNN
Magic Keyboard: amzn.to/421B26P
Travel Laptop Stand: amzn.to/3MDRx2Q
Logitech MX Vertical: amzn.to/3oCg1Bz
My Books
The Full Stack Agency: thefullstackagency.xyz/books/...
Lingo: Agile: thefullstackagency.gumroad.co...
Lingo: Startup: thefullstackagency.gumroad.co...
#GSAP #Webflow #JavaScript

[@webflowandcode]

Thanks for watching guys!! How would you modify this to a use select dropdown?? Do you accept the challenge?!

[@MarkFaamaoni]

This is both incredibly helpful, AND amazingly useful. I'm just starting to get my head around JavaScript, and this kinda content is just great. I'll probably continue to use the external libraries that I reach for at the moment, but I'll build your example out and play with it until I understand it, which hopefully in the long-run will help me make better decisions in future builds. Thank you, good sir!

[@webflowandcode]

Amazing! Great to hear. Hopefully you’ll be a whiz at JavaScript in no time

[@taunado]

Excellent, thanks.

[@kenlamb4430]

Have spent days looking for exactly this. Before I work up your example have a question...I want to use this on an image gallery where the user can click categories at top, the gallery only displays based on the category choice. I can get this to work with a series of static checkboxes (not dynamic links as your example here, which is what I want).....outside of needing your code example, the issue am having is even though can filter by category and the field of images updates correctly, the Lightbox function in Webflow still defaults to showing All the images not just the filtered images. Make sense? Any suggestion on how to get the Lightbox to behave based on the filter? And, forgot to say, Thank You for the video!

[@webflowandcode]

I’d suggest look at what’s happening in the HTML to figure out why those images aren’t getting hidden. Assuming you’re targeting images in the light box too and hiding them as well as the visible images. Inspect the code to have a clearer picture on things

[@kenlamb4430]

​@@webflowandcode Yah, so the code is all Greek to me. I know enough about html to be dangerous...haha. I understand CSS and a decent amount of what is going on but I do not know the full vocabulary. I stopped making websites around 12 years ago when I switched companies and gained a team of folks who I drew a picture and they made it happen--hahaha. Recent dip back into it is discovering Webflow and, honestly just love it even tho I don't understand all of it. In the code, I can identify the Lightbox, I can identify Webflow has several additional script functions. I cannot identify any kind of toggle or a select statement, I presume this is in Webflow's script. Back in Webflow Editor, Lightbox does offer conditional visibility, however, not based on a variable selected. I could be wrong but am not seeing it. Whatever the solution, I bet I am looking right at it but I simply don't know the exact language/ jargon. Perhaps is there a forum you could recommend I post this question to? Meanwhile, tomorrow morning will work through your example on this video...basically will type the code as you do so in the video see if . --Hey, thanks again, this is a fun adventure, for sure!

[@webflowandcode]

Best form is the Webflow forums. Share a link to your site with the issue and the community would be glad to help. It’s almost impossible for anyone to help without seeing your code.

[@IkevanGerven]

Great job! I'm not very familiar with codes, so this may be a strange question, but if you hide an item, will it still be included by SEO?

[@webflowandcode]

Yes. Because you’re hiding them from a visual perspective (the CSS). The HTML is still present on the page and this is what’s primarily read to understand the content of the page.

[@JavinTowers]

This is fantastic, and it's going to be perfect for a new project I'm tackling! Thanks a lot for your help! I have a questin, though. I'm looking for a more effective way to handle nested CMS lists. For instance, I'm working on a restaurant website where I need to display food items organized by their categories on the menu page. I've been using Finsweet's nested CMS lists, but I've encountered some issues with its reliability. Do you have any recommendations for an alternative or a more efficient solution?

[@webflowandcode]

I’m always going to be on the camp of coding it yourself. I don’t immediately jump to third-party solutions. I didn’t mention it, but once you have an array of all your CMS items there’s so much you can do with that using Array.sort()! Maybe a mother video on that

[@JavinTowers]

do you think it would be a better idea to have one CMS of all food items and then assign the menu and the categories in the food item CMS and use JS to sort/filter all on one page?@@webflowandcode

[@taunado]

Yes please keep making CMS filter videos using JS@@webflowandcode

[@taunado]

Is there a way to hide the other items of the Collection List in Webflow Designer panel? For example, I have a collection of Authors with Author Bio as a field, and want to render Author Bio to a page. When I add Author Bio as a Collection Item it displays all bios of all Authors (in Webflow Designer). JS will do the job when I view the published page, but I don't want to see all Author bios on the Webflow Designer page. Any way to just show the 1/sample text?

[@webflowandcode]

I’m struggling to know what you mean. You just want to see 1 example in the designer but show all in live? Not that I know of. Webflow doesn’t have a feature to hide on the designer as far as I’m aware. Try not to use JavaScript to organise/understand your page on page load. Use JavaScript to ADD functionality and interactivity. It shouldn’t be used to build your page.

[@taunado]

Thanks. Yea, what I mean is that showing all of the Collection Items in the Designer is messy in terms of understanding the real display of the layout (as the JS will hide all except for the filtered ones). So it'll be nice if Webflow released a feature to show only the first item of the array of collection items for realism of what is actually going to be displayed on the live site.@@webflowandcode

[@taunado]

Anyway, it's a minor thing, I can just scroll down of the Designer to style what's below the collection items.

[@webflowandcode]

Shame they don’t have this feature

[@webflowandcode]

Thinking. Have a play with an embed element with .w-editor. .w-editor .list-item { display: none; } .w-editor .list-item:first-child { display: block; } Something to that effect. Never tried it