Hey Finsweet Team,
I’ve got a question that I couldn’t find any answer for in the List Filter How-To.
We want to use the List Filter as a “highlight filter”, meaning that elements that do not match the filter should not be entirely removed but stay in the DOM and are just styled differently.
For us three methods came to our minds:
- Don’t remove items from the DOM and put a class on items that do not match
- Use List API to get the filtered items and put them in another container in the DOM on filter change using a custom script
- Use two “opposing” filters with the same inputs
Do you have any idea how to tackle the problem?
Thanks for you advice!
Nils
Hey @Nils_dasda
CMS Filter’s default behavior is to hide items that don’t match completely (removing them from the DOM). There isn’t a built-in “highlight mode” that keeps all items visible with different styling.
Your three approaches are all valid, with the second one being the most effective solution.
The first option using custom class addition is simple but requires custom JavaScript since Finsweet Attributes doesn’t natively support adding classes to non-matching items.
The second option using List API with manual container management gives you the most flexibility. This approach lets you get filtered results and manage two containers manually.
The third option with a dual filter setup would work without code but is harder to maintain and doesn’t scale well.
We’d recommend going with the second option using the List API. It gives you complete control over presentation while maintaining good performance. You’ll need to structure your HTML with separate containers for highlighted and dimmed items.
For implementation help with any custom code solutions, @Support-Luis or @Support-Pedro would be happy to assist you.