Easy Webflow Collection List Filtering!

[@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

[@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.

[@RashedKhanMenon-u4w]

Hi Samuel, I’m working on a dynamic section in Webflow where I want to display the number of posts for each category (like "Trending," "Celebration," etc.). I already have a "Categories" collection and a "Posts" collection in my project, with each post linked to its category. I want the post count for each category to show up automatically. For example: Trending (2 posts) Celebration (7 posts) Culture (5 posts) I tried using Collection Lists with filters, but I’m not sure how to set it up to show the count dynamically. Could you suggest a solution or a method to do this? Thanks a lot!

[@webflowandcode]

You could apply the category as an attribute and use JavaScript to loop through and track the count of each category and then apply the count to the text content of a span to display the final count(s)

[@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

[@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.

[@rubbentje]

I love your tutorial, and i followed it. But somehow i managed to not make it work. I can see that the #filter is getting added to the url. But nothing changes at my website. I am not sure what i am doing wrong. Are you able to make a clonable website of your workfile? so i can find my mistake? Love your channel btw

[@webflowandcode]

No problem. I’ll look into it!

[@taunado]

Excellent, thanks.