Does anyone have any guidance on how to have an active class added to the reset button? Ideally, it would appear the same as the radio buttons that I have set up when “checked”, but I can’t figure out through the documentation on how to get the state to toggle on/off.
Here is my public share link: LINK
(how to access public share link)
I was having this exact same issue, and I’m even using a simple radio list like you are. The CMS Filter documentation around the All (reset) option confused me like crazy. I’m honestly not sure if it’s just user error on my part, but I came up with a Javascript solution for the time being. Feel free to use it if you like. I’d personally rather implement their best-practice approach, but for the time being this is working. Perhaps another contributor knows how to do it the F’insweet way!
First, I made sure my filter elements all had the same class. In my case I used filter-option .
Second, I added an ID of all-items-radio to the radio option — this is the <input> element.
Third, I added an ID of all-items-wrapper to the “All items” filter element — this is the <label> element. I also manually added the current class here, so this one is combo classed as with filter-option and current on page load.
Finally, I added some pretty basic Javascript (jQuery in this case) to manage the current class:
<script>
var Webflow = Webflow || [];
Webflow.push(function () {
// Manage active state for the All items button as filters are used
$('.filter-option').click(function() {
if($('#all-items-radio').is(':checked')){
$('#all-items-wrapper').addClass("current");
} else {
$('#all-items-wrapper').removeClass("current");
}
});
});
</script>
@seanconnelly Are you using a radio button for the reset as well or a standard button? I have the reset set up as a standard button.
@Ash_Faulkner Use a radio button for the ‘clear’ or ‘all’ button. It’s important not to put it inside a link block (which is a step that’s recommended in the Finsweet CMS Filter documentation ). Just follow @seanconnelly instructions exactly and it’ll work perfectly.
ps: don’t forget to add "fs-cmsfilter-element=clear" attribute on ".filter-option" div
Thanks for the clarification!