Using JS to filter collection items, but need certain items to only show after being filtered

Hi there,

Is it possible to hide certain collection items but still have them occupy the page and only have them appear when they’re run through JS to be filtered?

I’ve created a filter by using one that was designed by finsweet to display custom embedded schedule tables. For this to work I’ve been having to make different variations of the tables with it only displaying certain sections, i.e. Youth (category) Tuesday (days), etc. This makes it so that at a non-filter state every single table that I’ve created is populating my collections list and I just want a few to show, but need to keep them all on the page so that the code by finsweet can still pick up the class and apply the filter. Idk if this is possible so the only workaround that I’ve been able to do is set a height to the collection-list-wrapper and so it just cuts off additional tables that I don’t need.

I hope this makes sense…


Here is my site Read-Only: LINK
(how to share your site Read-Only link)