Collapsing Toolset Filters with the Collapse-O-Matic Plugin

As you already know from my last couple of posts, I’ve been loving Toolset because it lets you filter your archive pages. But sometimes a large number of filters can get out of hand and make your page too long. That’s when it’s a good idea to collapse your filters using the Collapse-O-Matic plugin. I love this Collapse-O-Matic plugin because it lets you use shortcode to allow your titles to collapse and expand.

First, here’s an example of some filters where I have used this plugin:

Here is my Views code BEFORE I added the Collapse-O-Matic code:

[wpml-string context="wpv-views"]Biology[/wpml-string]
	[wpv-control-post-taxonomy taxonomy="biology" type="checkboxes" url_param="wpv-biology"]

And here it is after:

[expand title='[wpml-string context="wpv-views"]Biology[/wpml-string]']
	[wpv-control-post-taxonomy taxonomy="biology" type="checkboxes" url_param="wpv-biology"][/expand]

You can see that I have just taken the basic Collapse-O-Matic shortcode, which is:

[expand title="Trigger Text"][/expand]

And substituted my Views label for the trigger text and then enclosed the filters in the shortcode. Make special note that I had to wrap the trigger text in single quotes instead of double quotes so it wouldn’t interfere with the other double quotes within the Views shortcode.

I should also note that since I prefer to use ajax to render my Views results, that I needed to use that js editor under the filter editor to add some js so that the filters would collapse again after the results are rendered. Here’s where to add the js:

And here is the code that I added:

jQuery( document ).on( 'js_event_wpv_parametric_search_results_updated', function() {
	/**
	* data.view_unique_id (string) The View unique ID hash
	* data.layout (object) The jQuery object for the View layout wrapper
	*/
  collapse_init();
});

If you want the page to also scroll to the top after your results are rendered, I have a post on that as well.

Extra Credit

If you want to go further and have the sectors stay open if they are checked, here is the code I used to do that. (Special thanks to my friend Taqi Hasnain who figured this out for me!)

jQuery( document ).on( 'js_event_wpv_parametric_search_results_updated', function() {
/**
* data.view_unique_id (string) The View unique ID hash
* data.layout (object) The jQuery object for the View layout wrapper
*/

jQuery(".collapseomatic_content").each(function() {
var this_section = jQuery(this);
var any_checked = this_section.find("input[type='checkbox']:checked").length;

console.log(any_checked);

if( any_checked > 0 ) {
this_section.show();
} else {
this_section.hide();
}
});
});