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

[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