Add active class to item on click

Anonymous

#8682

Hi!

I’ve been trying to add an active class to the li on click, but for some reason it’ll only work when the radio/checkbox button itself is clicked, not the full label. Is it possible to add an active class when the whole thing is clicked?

Ross Moderator

#8689

Hey Amber

How are you currently adding the class?

If you are using jQuery you could always use closest – something like:

$(".someinput").on("change", function(){
    $(this).closest("li").toggleClass("active")
});

Thanks

Anonymous

#8698

Perfect, thanks! For some reason, just doing a simple click on the li wasn’t working.

Is there a way to do it automatically based on the URL though? So if the URL is:

/?_sft_trip-crafted-for=explorers&_sfm_rafting_trip_length=Multi-Day&_sfm_rafting_trip_level=Medium

the explorers, multi-day and medium choices would already have the active class? Here’s the sample URL:

http://development-client-server.com/echo/rafting-trips/?_sft_trip-crafted-for=explorers&_sfm_rafting_trip_length=Multi-Day&_sfm_rafting_trip_level=Medium

Ross Moderator

#8731

Hey Amber

Although they don’t have the active class I’m assuming that the search form is correctly pre populated? As in, the checkboxes for those options are automatically selected?

In this case I think it would be easier to add classes based on this – so something like (untested):

$('.searchandfilter input[type=checkbox]:checked').each(function(){
    $(this).closest("li").toggleClass("active")
});

Basically this will go through all the checkboxes in the search form that are checked, and then apply the class to the nearest li.

Hope that helps!?

Anonymous

#8745

I originally tried that one as well, but as you can see in the sample link, it works perfectly now on load, but if I change the parameters and click something else, the :checked isn’t getting applied to the new items, although it then shows in the URL search screen? Sorry about this!

Ross Moderator

#8775

Hey Amber

I think I follow you, then you want to fire the above code whenever a form input is changed/updated – there would be a few ways to hook into it

One simple solution I think would be to hook in to the S&F js/ajax event (http://www.designsandcode.com/wordpress-plugins/search-filter-pro/faqs/):

//this event is fired when an ajax request starts - so in most cases this is when you submit the form, or change a field - but there might the smallest of delays before the class is applied
$(".searchandfilter").on("sf:ajaxstart",function(){
    $('.searchandfilter input[type=checkbox]:checked').each(function(){
        $(this).closest("li").addClass("active")
    });
});

The alternative would be to check when an input has changed – which would be instant – I guess better (but untested code) so..:

//when something is changed in a form
$(".searchandfilter input, .searchandfilter select").on("change",function(){
    $('.searchandfilter input[type=checkbox]:checked').each(function(){
        $(this).closest("li").addClass("active")
    });
});

Of course you would need to remove the active class on all your elements first before running the scripts above which only add the class you need

Hope that helps 🙂

Anonymous

#8781

Everything worked perfectly for radio items, but not for checkboxes (since they could be multi-toggled) I just changed the first section to radios as well, so now everything is working. Thanks for your help 🙂

Ross Moderator

#8785

This reply has been marked as private.

[Author]

Posts