Layered Navigation accordion not working if filters used PS 1.6

[solidsteak]

I'm not sure if this is a feature or something is wrong with my particular code, but if I filter products the accordion to minimize the filters does not work.

 

I actually do think this is intentional as any demos and clean builds I've come across for PS 1.6 have this behavior.

 

Any way to make it able to minimize?

 

Thanks

 

Ok, so I figured out that the problem stems from the following line of code in blocklayered.js in the themes.

$('#layered_block_left').replaceWith(utf8_decode(result.filtersBlock));

Basically, the js binding the accordion actions is lost once replaceWith() is used. Theoretically, the accordion should still work because .on('click') is used in global.js for the accordion. I'm not adept at js enough to know why it doesn't work.

 

There's probably many ways to fix this, I just simply added the below code right after the code above in blocklayered.js

$('#layered_block_left .title_block').on('click', function(event){
	$(this).toggleClass('active').parent().find('.block_content').stop().slideToggle('medium');
});

There will also need to be adjustments in the css to make sure things look right. Like making the container display:none to begin with.

Edited March 30, 2017 by solidsteak (see edit history)

[Phil23]

Hi,

 

I've faced the same issue and found out that it's due to the way the event is bound in the theme's "global.js" file.

 

The "accordion" function reads :

$(accordion_selector).on('click', function(e){
	$(this).toggleClass('active').parent().find('.block_content').stop().slideToggle('medium');
});

To prevent the event binding to be lost upon DOM modification, it should read :

$(document).on('click', accordion_selector, function(e){
	$(this).toggleClass('active').parent().find('.block_content').stop().slideToggle('medium');
});