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

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

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

3 Likes

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

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?

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

1 Like

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 (:smile:

@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 :smiley: however according to finsweet, it should be possible.

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 :smiley:
if you made it work, please help me further! :slight_smile:

regards

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 :smiley:

Oh the struggle! I just tried the ‘Focus styling’ approach mentioned (Highlighting the 'View all' filter (radio button) using FinSweet Attributes - #2 by rachelsausan44) but like @hagi I don’t believe it’s the right way (Highlighting the 'View all' filter (radio button) using FinSweet Attributes - #8 by hagi)

So I tried something else. I made the active look the default of the All button, and made interactions for the other filter (radio) button that changed the styling of the All button to make it look inactive. And finally made an interation for the All button making sure it would make it look active when clicked.

With this trick the All button looks active on page load by default.