Looking for support? You can access the support system via your account.
Forums › Forums › Search & Filter Pro › Add active class to item on click
- This topic has 7 replies, 2 voices, and was last updated 9 years, 3 months ago by Ross.
-
Amber Weinberg(Private) December 7, 2014 at 7:47 pm #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(Private) December 8, 2014 at 12:37 am #8689Hey 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
Amber Weinberg(Private) December 8, 2014 at 2:34 am #8698Perfect, 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:
Ross Moderator(Private) December 8, 2014 at 2:04 pm #8731Hey 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!?
Amber Weinberg(Private) December 8, 2014 at 3:04 pm #8745I 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(Private) December 8, 2014 at 8:49 pm #8775Hey 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 🙂
Amber Weinberg(Private) December 8, 2014 at 10:19 pm #8781Everything 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 🙂
-
AuthorPosts
You must be logged in to reply to this topic.