In the BricksLabs Facebook group a user asked:
[Filters and conditional visibility]
Hi all, is there any way to show or hide a filter (range) based on the selection made on another filter (dropdown)?
I have this page with a query of several dozen locations, each with a custom fields to identify four characteristics:
- mode of transportation (car, motorcycle, bicycle)
- time spent by car
- time spent by motorcycle
- time spent by bike
the filters available to the user will be these four. The first is a dropdown or radio (still a filter where a single item can be selected), the other 3 are ranges.
The problem is that some locations are reachable by both car and bike and therefore have time values for both. At the moment, whatever choice of mode of transportation the user makes still has the option of changing all 3 ranges. So if he chooses to travel by car but accidentally sets 1 hr as the maximum time duration by bike, the query is also filtered based on the time by bike and many locations disappear.
Is there any way to set the visibility conditions so that based on the choice made in the first filter (dropdown or radio) the corresponding filters (ranges) are shown?
Thank you all, I am wasting a lot of hours on this, but I have a feeling it is something simple to do
I have already asked in the bricks community group but none answer
This Pro tutorial provides the steps to conditionally hide other filters based on the option user selects in a Bricks filter select.
Consider this ACF field group:
Mode of transportation - Select type with these choices: Car, Motorcycle, Bicycle
Time spent by car - Range type
Time spent by motorcycle - Range type
Time spent by bicycle - Range type
Each Range field has been set up to show up in the post editor only if the corresponding mode of transportation has been selected.
Ex.:
In Bricks editor we set up a posts query loop and added filters to filter the posts by the corresponding custom field values.
On the front end if the selected option for mode of transport is say, Car then in addition to the posts being filtered (which Bricks take care of), we want to also hide non-Car range filters, like this:
By default, it's going to be like this:
After implementing the tutorial:
Note: As of Bricks 1.10.3, a select custom field with multiple values is not supported.
Single Tutorial Purchase Option
Lifetime access to this single tutorial can be purchased for $39 here.
Step 1
If you haven't already set up the filters in Bricks editor, copy the fully-built Section from the JSON link below and paste.
