[Resolved] Highlight current filter option with CSS

[Author]

Posts

[Pavel Capcan]

In this example: hidden link

How can I highlight the selected (active) filter option? For example: "brass". In code there is no specific classname for an active label.

Thanks!

[Waqar]

Hi Pavel,

Thank you for contacting us and I'll be happy to assist.

To add a special class (e.g. "active") to the label of the selected filter's option, you can use custom JS code, for example:

<script type="text/javascript">
jQuery( document ).ready( function( $ ) {

    // add active class to the parent label of checked radio input, on page load
    $('.category-selector .radio label input[checked="checked"]').parent().addClass("active");

    // function to detect change in the radio input selection
    $('.category-selector .radio label input').change(function(){
        var $this = $(this);

        // remove active class from all labels of radio input
        $('.category-selector .radio label input').parent().removeClass("active");
        
        // add active class to the parent label of checked radio input
        $this.parent().addClass("active"); 
    });

});
</script>

For a more personalized and detailed assistance around custom code, you can consider consulting, one of our certified consultants:
https://toolset.com/contractors/

I hope this helps.

regards,
Waqar

[Pavel Capcan]

Thank you Waqar for the quick response!

I still can't figure it out.
First, there is no such class ".category selector" in the default code of the filter. So I replaced it with ".form-group". Next, I removed the <script> tag from your example and placed the code into the JS Editor field of the Search and Pagination section on the View settings page. The front-end output is:

<script type="text/javascript">
//-----------------------------------------
// View: Cheat Sheets Grid Main - start
//-----------------------------------------
jQuery( document ).ready( function( $ ) {
 
    // add active class to the parent label of checked radio input, on page load
    $('.form-group .radio label input[checked="checked"]').parent().addClass("active");
 
    // function to detect change in the radio input selection
    $('.form-group .radio label input').change(function(){
        var $this = $(this);
 
        // remove active class from all labels of radio input
        $('.form-group .radio label input').parent().removeClass("active");
         
        // add active class to the parent label of checked radio input
        $this.parent().addClass("active"); 
    });
 
});
//-----------------------------------------
// View: Cheat Sheets Grid Main - end
//-----------------------------------------
</script>

It doesn't add the ".active" class to the respective label. What did I miss?

Thnks!

[Waqar]

Hi Pavel,

Thanks for writing back.

In the code example, I included the outer wrapper's class "category-selector" to limit it only for that specific group of radio fields, as shown in this screenshot:
hidden link

During my testing on a test website, the code works as expected with "form-group" class as well.

To troubleshoot, why the script is not working on your website, I'll recommend checking the browser's console for any script errors/warnings, which can affect the execution of all JS scripts on the page.
( https://codex.wordpress.org/Using_Your_Browser_to_Diagnose_JavaScript_Errors )

You're also welcome to upload your website to an online server and share the link to a page where this filter and custom code is in use.

regards,
Waqar

[Pavel Capcan]

There is no errors in the console.

Please check it out here: hidden link

[Waqar]

Hi Pavel,

Thank you for sharing the website link.

Since the view is using the AJAX based filtering, the script will need to be slightly updated.

1. Please replace the script from the last message with the following:

function custom_active_label_class() {
$('.category-selector .radio label input[checked="checked"]').parent().addClass("active");
}

jQuery( document ).ready( function( $ ) {
custom_active_label_class();
});

2. To make this script also execute, when the results have been updated, add the function name "custom_active_label_class" (without the quotations marks) in the field "will run after updating the results".

You'll see this in the View's "Custom Search Settings", as shown in the screenshot:
( screenshot: hidden link )

Let me know how it goes.

regards,
Waqar

[Pavel Capcan]

My issue is resolved now. Thank you Waqar!