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
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,
Delete all current attributes
Change the form to link button/button
Add this fs-cmsfilter-element = reset to the button
If you want to use the same class for the active state, style it on “Focus” state
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?
@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:
when page loads, the show all button is checked, but no entries are shown
when i hit another button, the filter works
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 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.
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!
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