AJAX checkboxes turn into an accordion

Anonymous

#44057

I have a lot of options for my checkboxes and am using some code to turn them into accordions. Unfortunately, I just realized that it looks like the filters are being recreated every time an option is selected and stripping out my accordion classes I need for them to function.

Please tell me there is a way around this, else I will be back at ground zero.

Here is the jQuery used for the accordions.

ecg.accordions = ecg.accordions || {};

ecg.accordions = {

	scrollToDiv: function(element){
		var offset = element.offset();
	    var offsetTop = offset.top - 40;
	    $('body,html').animate({
	                scrollTop: offsetTop
	    }, 500);
	},

	init: function(){
		$('li[data-sf-field-type="taxonomy"]').not(':first').children('ul').hide();
		$('li[data-sf-field-type="taxonomy"]:first-child h4').addClass('expanded')
	
		$('li[data-sf-field-type="taxonomy"] h4').click(function(){
			
			if ($(this).hasClass('expanded')){
		    	$(this)
					.next()
					.slideUp('fast');
				$(this).removeClass('expanded');
			}else{
		    	$('.expanded').each(function(){
					$(this)
						.next()
						.slideUp('fast');
					$(this).removeClass('expanded');
				});                     
				$(this)
					.next()
					.slideDown('fast', function(){
		                var el = $(this);
		                ecg.accordions.scrollToDiv(el);
					});
				$(this).addClass('expanded');
			}
			return false;
		});
	} // init

} // ecg.video_resize

Everything works fine when the page loads but when you check a checkbox all the classes are removed and nothing works.

Anonymous

#44058

This reply has been marked as private.

Ross Moderator

#44100

Hey Jack

The search form is now reloaded so that the options can filter dynamically depending on what current search has been performed (you need to enable “auto count” and “hide empty in your fields, to see the effects of this)

There is a jQuery event that tells you an ajax request has finished, which I think you will need in order to re-initialise your code.

You might need to add something extra, like saving the “last open” accordian so you can open the correct one once the ajax has finished.

The event is here on the first question:

http://www.designsandcode.com/wordpress-plugins/search-filter-pro/faqs/

Thanks

Anonymous

#44128

This reply has been marked as private.

Anonymous

#44152

Nevermind, I got it working. I used Local Storage to save the open accordion. Probably not the best solution but I couldn’t figure out another way.

Ross Moderator

#44160

Hey Jack

Localstorage sounds like overkill, and it can be a complex beast too…

If its an ajax request, then the page never refreshes, which means you can just store it in a JS variable as you don’t need to store this info between page requests…

So assuming you can only have one item open at a time (I one part of the accordian closes another) I would approach it something like this (totally made up, but just logically):

var last_open_tab = "";

//when the accordion is clicked grab its name/id whatever we can to identify it - you probably have a way of doing this already
$(document).on("click", ".accordian-heading-class", function(){
	last_open_tab = $(this).attr("id");
});

//detects when the ajax request has finished and the content has been updated
$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
	//now the form is reloaded, open the accordion again
	if(last_open_tab!="")
	{
		//this is almost definitely not the correct code to open your particular accordion
		$(last_open_tab).next().show(); 
	}
});

Hope that helps!

Thanks

Ross Moderator

#44162

BTW, to stop the animation (of the accordian re-opening), you could tell it to jump to the end of the animation immediately, so you don’t see the sliding affect.

It looks like its the UL inside a field that gets animated, so after the ajax request, and telling your accordion to open, you could call .stop(true,true); on the <ul> – https://api.jquery.com/stop/

Thanks

Anonymous

#44170

Thank you for the replies and taking the time to help! I agree the localStorage is overkill, it was only a few extra lines of code though. Your approach is what I wanted I just couldn’t get it to work. I will tinker with your logic and try to figure it out. Thanks again!

Anonymous

#56764

Jack, I am ultimately looking to accomplish the same thing.

Would you be so kind to share the solution you wrote in its entirety (including the local storage part)

Thank you.

[Author]

Posts