Category filter styling

[bendorf_07Participant]

I am using Ajax Search Pro on a development website for the blog page at https://kravebranding.com/drsd/disability-rights-blog/

My client wanted the category selection to look like buttons rather than radio options, so I wrote some css to make it look the way they wanted it. However, they want to have an indication on the active selected category. because the radio is nested with the input inside of the label, I am unable to target anything by using input[type=radio]:checked. Or input[type=radio]:checked + label. do you have any way to make the categories display like I have it on the page now, but show say a dark blue background on the current selected category?

[Ernest MarcinkoKeymaster]

Hi,

I think the easiest and fastest way is to use a bit of javascript to mark the selected label. In CSS it’s not possible to target parent selectors, so I don’t think there is any other option:

jQuery(function($){
    $('.asp_label').on('click', function(){
        $(this).parent().find('.asp_label').removeClass('asp_label_selected');
        $(this).addClass('asp_label_selected');
    });
});

This will add “asp_label_selected” class to the current selection, then you can target it with CSS:

.asp_label_selected {
}

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[bendorf_07Participant]

Thank you Ernest, I did try to add this exactly as written but it doesnt seem to be working properly. If you inspect this page you will see the function loading in the head:
https://kravebranding.com/drsd/disability-rights-blog/

Did I set this up incorrectly, should the function be changed a bit? My experience with CSS is high, my JS and JQuery is very low though, so your help is appreciated!

• This reply was modified 2 weeks, 3 days ago by  .

[bendorf_07Participant]

Could this be written in vanilla JS rather than jquery?

[Ernest MarcinkoKeymaster]

The header is not the best place for the script, I recommend putting it to the footer, right before the closing body tag, that should do the trick. When I initiate it from the console it does work, so the issue is only the timing.

Could this be written in vanilla JS rather than jquery?
Surely, it would be a bit more complicated, but since you have jQuery on the pages loaded, it’s just much simpler to utilize it.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[bendorf_07Participant]

I moved the code to the theme file right before the closing body tag. A bunch of plugin scripts automatically insert below (a lot from ajax pro) it so that seems to be the lowest I can place it. Any suggestions?

[Ernest MarcinkoKeymaster]

It still should be okay, maybe there is a delay on the window load and a timeout could actually fix it:

jQuery(function($){
    const load = () => {
        $('.asp_label').on('click', function(){
            $(this).parent().find('.asp_label').removeClass('asp_label_selected');
            $(this).addClass('asp_label_selected');
        });
    }
    load();
    setTimeout(()=>load(), 1500);
});

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[bendorf_07Participant]

This worked! Thank you so much!

[Ernest MarcinkoKeymaster]

You cannot access this content. Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[Author]

Posts