Filtering two different CMS collections in another collection that has them nested in it?

[chrsdesigns]

Hello!
So I have two catering menu CMS collections.

One is for on site catering and one is for off-site catering.

Each collection has multilpe food truck menu which I have CMS attribute filter set. Filters are working as expected.

I would like to create a filter switch for these two Collections. If the user wants on site catering they can click the filter button and get on site. Or they can click off site and get those options and filter through the food truck menus.

Tying to wrapp my head around this.

Would I nest these collections into another collection and create a third CMS list.
List-3, filter-3, on-off-site filer idnetifer

Will that do the trick?

Any suggestions would be greatly appreciated. Thank you

read only
https://preview.webflow.com/preview/zocalo-29767b?utm_medium=preview_link&utm_source=designer&utm_content=zocalo-29767b&preview=10cb91cd9e0630a33253cf3a1f7e1da2&pageId=64a2e558320a0c2853840c1a&workflow=preview

Live site
Pword: zoc1
https://www.zocalofoodpark.com/catering

Thank you!

[Support-Luis]

Hey @chrsdesigns! Ther are several options for this, you can have tabs featuring each collection list, each with its own CMS Filter instance and the user can see only one tab at a time or you can add a switch as shown in the image below where the user can toggle to show/hide on-site or off-site.

[chrsdesigns]

Thank you Luis the tabs element is working perfectly. I am now having an issue with the starting checked active state on these. Both have the checked = checked attribute on but when I flip back and forth with the tabs there are issue with one or the other not being checked.