Filter Sidebar

[MaximSiebert]

I'm looking to create a filter sidebar for my field group items - similar to done on this page https://www.blueprintsys.com/resources. I have the items listed on this page https://www.ada.support/learning-centre. I've added a 'choice' field to my field group so that for each item I can pick if it's an ebook/webinar/etc. Now I'm looking to create the filter sidebar.

My first instinct is to create a text repeater field which I would add all the types from the field group choice field to, then using jquery/css to hide and show items based on which text repeater item is selected.

This feels very hacky and I was wondering if there's a better way to achieve this.

Thanks in advance!

[Adesignl]

The way you are filtering by type could be used top  filter by category as well. You would jiust have to check against both at the same time. 

This is a great and fast way to do it if there is not to many items. but if you have a larger selection it is better to use ajax.

Here is a doc with the javascript connectors info.

https://docs.google.com/document/d/e/2PACX-1vTuu12oFF4bQY1zVD2-WKFuM2dEDN81-fZRV1tGaCL5Z_OcjC-B6O3mH...

[cbarley · Accepted solution]

Hi @MaximSiebert , do you have access to HubDB? If so, I'd say this would be quite easy to set up without the browser having to render all items, and hide them with CSS. 

This article (https://designers.hubspot.com/docs/tutorials/how-to-build-a-real-estate-listing-with-hubdb) has a really great example of filtering capabilities with HubDB. 

Your CSS/Jquery solution is definitely okay too, as long as the number of items doesn't get too large, and you don't have to render out a ton of things to the DOM initially

[MaximSiebert]

I ended up going with my CSS/jQuery solution for now, but I do agree - once the number of items gets a little too large I'll have to look into the HubDB solution you shared!