Highlighting the 'View all' filter (radio button) using FinSweet Attributes

[duffman7 (Ciarán Duffy)]

Hi there,

I’m using FinSweet’s attributes method to filter a simple CMS of blog posts. I want to have an option called ‘View all’ (which is basically a reset button), that’s selected on page load. I have everything set up and working, except I can’t seem to get the is-active class to apply to my View-all radio button

When I load the page it looks like this:

But I would like it to look like this:

Anyone have any ideas where I’m going wrong?

Thanks in advance for any support you can offer

Read-only link: Webflow - TalkToLoop.org

[rachelsausan44 (Rach)]

First of all, I don’t think we can use “reset” on the radio button, since it stated on the documents that reset only works for the link button. But, I have found the solution.

For “View All” button,

1. Delete all current attributes
2. Change the form to link button/button
3. Add this fs-cmsfilter-element = reset to the button
4. If you want to use the same class for the active state, style it on “Focus” state

Hope it works on your end

[Richard_Rolfs1 (Richard Rolfs)]

OMG, you are a life saver - spend hours on this

[pxlt (Matt)]

This also solved (most of) the issue for me, but one remaining question — how do you get that ‘view all’ option to already appear as selected when the page loads?

[Elay_Soiferman1 (Elay Soiferman)]

you can use
document.addEventListener(“DOMContentLoaded”, function () {
const button = document.getElementById(“myButton”);
button.focus();
});

[tannerxlatham (Tanner Latham)]

I have run into this issue a few times and finally found the solution that works using a radio button just through Attributes!

Make sure your ‘View all’ radio button does NOT have a field identifier Attribute attached to it (fs-cmsfilter-field= IDENTIFIER)

Make sure your ‘View all’ radio button DOES have these attributes:

• fs-cmsfilter-element = clear
• checked = checked

Hope that helps (

[hagi (Sandro Hagen)]

@tannerxlatham Thanks for this input!
However I ran into the exact same issue and cannot believe that there is no native solution without any javascript or custom css adding. Also styling the focus state is not the right way, because the focus is lost as soon as users click on another element on the page.

So i tried what you said:
the input radio button (the circle element) has NO identifier attribute but the two attributes you mentioned.
but the behavior is not correct:

1. when page loads, the show all button is checked, but no entries are shown
2. when i hit another button, the filter works
3. when i hit the view all button again, the filter works (it is resetting correctly) BUT the active state is gone. I also found out that the radio element is not really checked then again, which might explain why the active class is not rendered

here a video:
https://recordit.co/bCANCHvtpo

here the link: www.ricketyroom.com/media/
(its password protected, click on the logo and scroll down, use “ricketyroom2023” as password)

i had the exact same problem in another website and also found couple of other forum posts, but the really native solution does not seem to exist however according to finsweet, it should be possible.

Finsweet Attributes: Add Active Class to All (reset) 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

Active state for reset button on filter

To style the reset button in its active state, you can use the :checked pseudo-class in your CSS. This allows you to target the radio button input when it is checked, and apply a different style to it. Assuming your reset button is a radio button input with the ID of reset, you can use the following CSS to style it when it is checked: #reset:checked + label { /* Your active styling here */ background-color: blue; color: white; } This CSS selector targets the label element that comes imme…

in their docs they mention on the one hand that you should use the clear attribute on the radio button and combine it with checked=checked.

however in the clear statement they mention it is only possible to apply it on buttons, link blocks or textlinks.

my intention then was to use this clear statement which should clear all filters of one identifier. but they say it needs to be added with an element having the clear statement.

it is veeery confusing
if you made it work, please help me further!

regards

[hagi (Sandro Hagen)]

A short update on that:
Now initially the items are shown.
i moved the fs-cmsfilter-clear attribute away from the input radio element to the radio label element.
so things are working now, BUT still no active class, neither on load nor when i click back to it