Hiding and Unhiding Filters

[BryanY]

I want to allow the user to hide the filters (the whole left column), which should result the product list (center column) to expand to fill up to the hidden filter section, and vice versa if they plan to un-hide the filter.

 

Can someone guide me towards on how I should do this?

 

So far I have created a button, and not sure how to do the rest. This is the code I added to the category-count.tpl file.

<button class="btn btn-default button" id="toggleFilter">{l s='Hide Filters'}</button>

 

[NemoPS]

Have it do something like

$('#left_column').toggle();

Then check if center column has a class like "expanded" , if not, use

$('#center_column').addClass('expanded');

Now you have to check the col-xs-whatever class it has, remove it and add col-xs-12 (and col-sm-12, and so on)

[BryanY]

Which js file do I put my javascript/jquery in?

[NemoPS]

I'd go for theme folder /js/global.js

[BryanY]

This is the code I put in the global.js. It works perfectly on the first page in the category. But once I change from page 1 to page 2, the button doesn't anything anymore. 

$("#toggleFilter").on('click', function(){
	$("#left_column").toggle(display);
	$("#center_column").toggleClass( "col-sm-9 col-sm-12" );
});

[NemoPS]

Uhhh right you are using the layered navigation.
That makes things more complex. Basically you should register the event whenever that block replaces the column (as I think it does)

[BryanY]

Okay, I found the best place to put it to get it both working, in the themes/<theme>/js/modules/blocklayered/blocklayered.js, in the updateProductUrl() function.