[Resolved] Conditional display of Views filters

[Author]

Posts

[ruudd]

Hello Nigel,

Thanks for this. Works like a gem now.
Not sure if this needs to be addressed in a new ticket, but I have one more question regarding the filters in the new page I made; hidden link

There are two filters on the right; Start datum and Dag. These two should ideally not be displayed simultaneously, but should be dependent on the filter in the middle, named Frequentie.

If a visitor chooses one of the two values, then either Start datum OR Dag should be displayed. I tried to accomplish this with the Conditional Output functions (Filter Editor), to no avail.

Is this possible at all?

Best regards,
Ruud

[Nigel]

Hi Ruud

There are two kinds of conditional display in Toolset, and neither is applicable here.

One is for Types fields where you conditionally display one field depending on the value of another field (the equivalent is also available in Toolset Forms).

The other uses the wpv-conditional shortcode to add the enclosed markup to a page or not depending on some test. But this test is evaluated on the server while constructing the page, and would determine whether or not to include a filter control in the markup at all, for example.

What you need is something that happens purely on the front-end with JavaScript, which changes the visibility of your Start datum and dag filter controls according to the selection of your Frequentie field.

Make sure where you insert the Start datum and dag filter controls that the wrapper divs have some unique class that you can use to target each of them separately.

You can then add some custom JS to the View which

- initially hides both filters
- attaches a change event listener to the Frequentie input that modifies the other filter controls accordingly

When inserting your custom JS wrap it in the following so that you can then use jQuery with $ as normal:

( function( $ ) {
	$( document ).ready( function(){
		// Your code here

	});
})( jQuery );

You'll use .show(), .hide, and .change()

hidden link
hidden link
hidden link

If you get stuck, let me know.