Need active class applied to the filter button for which the filter query URL affects

Hello,

I’m using Show Query to display CMS filter queries, which are used as link URLs from other pages to the content page, where filtering occurs. The filtering seem to work fine albeit two issues:

1- In the content page (where filtering occurs), I have checkbox buttons that apply the filters, and I need the button associated with the given filter (passed in the query URL) to be active so that users know what filter is applied and can disable it.

2- I need the “Next” button (from the load more script) to be hidden when there are no more items to load (right now it is displayed with inactive status).

Any thoughts please?

@ala.alshaibani, we can help with your Show Query CMS filtering issues.

For your radio button active states, add the attribute fs-list-active="is-active" to each radio button element in your filter form. This will automatically apply the active class when users land on your page via query URLs, showing which filter is currently applied. Just style the .is-active class in your CSS to create the visual active state you want.

For hiding the “Next” button when there are no more items to load, create a combo class called is-list-pagination-disabled on your “Next” button and style it with display: none. Finsweet Attributes will automatically apply this class when no more content is available to load.

Both solutions use the built-in functionality of Finsweet Attributes without requiring custom JavaScript, making them reliable and easy to maintain.

Give these implementations a try and let us know how it goes! If you need more specific guidance, @Support-Luis or @Support-Pedro can help you further.

Hello Finn, thank you for your response!

The pagination adjustment worked perfectly.

Regarding the filter - I have checkbox buttons, so I applied fs-list-active=”is-list-active” to the parent of the checkbox element (same parent that adjusts active class when the checkbox is checked), and I use “is-list-active” as my active class. But it still doesn’t seem to work when I land on the page via a query unfortunately.

Hey @ala.alshaibani! Could you share your read-only link? We’ll take a look!

Hi Luis - Please check your DMs!