Streaming live at 10am (PST)

List selection and deselection

I have create an allergens page on my site so that customers can select their dietary requirements which then displays the items on the menu that are suitable. The page that I’m working on is titled ‘ALLERGENS’. I have already put the page together. The issue I have is when two or more ingredients in the list are selected .i.e. Peanuts and Nuts. If both are selected and one is then deselected it triggers all the items on the menu to display again. However, the menu items should remain ghosted because the other the ingredient is still selected.


Here is my site Read-Only: https://preview.webflow.com/preview/patty-bun?utm_medium=preview_link&utm_source=designer&utm_content=patty-bun&preview=be9e8de2cab2117265e9b770fdb650e1&pageId=5d8f5806d12b5b07b58a68f1&mode=preview
(how to share your site Read-Only link)

Hi @studioross,

Can you please publish to the webflow.io site as the preview does not show that filter issue.

Oh yes sorry. I’ve just published to webflow. Thank you!

Hi @studioross,

After looking at your site, you have it setup entirely with interactions. Why was this not built with CMS inmind? You would have been able to create ref and multi-ref fields and then the selecting would work like you want it to. Interactions are designed for one and two click instintances.

Yeah. What’s happening is that when you “deselect” it triggers full opacity to the same div that you don’t want the full opacity. Peanuts and Nuts are fighting to control the same divs.

Love the site!

Thanks. Unfamiliar with reference fields. I’ll try and work it out

@studioross,

Ref and multi-ref fields are only available through the CMS feature of webflow. If you are not planning on hosting with Webflow this is a mute point!

So the ref field approach should be applied to the actual list of ingredients or the menu or both? Do you know of any tutorials without that annoying webflow university voice?

Hi @studioross,

You would use CMS for it all. The ref fields, ingredients, etcs.

And Maguire is a god. lol

As for independents on how to do all of this, there are others Youtube who have videos directed at this. You can also view Webflow’s YT channel as well as PixelGeek on YT.

Just do a search for Webflow CMS tuts on YT or google search. There are literally dozens if not more.

1 Like

Don’t know if I’d be here without Maguire. :thinking:

Hey sorry me again. So using a CMS to do this is a way better solution so thanks for recommendation. I’m just wodnering now tho what triggers the interaction? Is it a case of using the link element featured in the CMS that when clicked hides the other collection that is the menu? Or is it a button?

Could you elaborate on how this actually works? I can’t source any tutorial associated with user triggered fields that effect another list?

Hi @studioross,

This could be something like a realtor list. When you click on how many bedrooms, baths, etc, it will fitler based on those selections.

It is a matter of setting up the categories, which in your case would be the different ingredients. and then link those ingredients to the food. The categories would then be selected and then filtered.

Here is one that I did for a single blog with a single set of reference fields.
https://www.thegateofheaven.org/articles

Yours would have many.