So using facetWP I see how you can hide the results template until you have selected a facet by setting up CSS with an additional class that you add once something is selected.
I wanted to also hide 3 out of the 4 facets until someone has made a selection from the first one. So I've tried to adapt that code without any luck.
<script>
(function($) {
$(document).ready(function() {
$('.facetwp-dropdown').on('change', function() {
var selectedOption = $(this).val();
if (selectedOption === 'become-part-of-a-brand' || 'buy-an-existing-business'|| 'self-help-components-approach') {
$('.facetwp-facet-business_area').addClass('visible');
$('.facetwp-facet-activity').addClass('visible');
$('.facetwp-facet-star_rating').addClass('visible');
}
});
})(jQuery);
</script>
This obviously has the corresponding CSS:
.facetwp-facet-opportunity_area {display: block;}
.facetwp-facet-business_area {display: none;}
.facetwp-facet-business_area.visible {display: block;}
.facetwp-facet-activity {display: none;}
.facetwp-facet-activity.visible {display: block;}
.facetwp-facet-star_rating {display: none;}
.facetwp-facet-star_rating.visible {display: block;}
I know I'm missing something blindingly obvious but Javascript is not my strong point... basically, as soon as the dropdown that I'm referencing changes to any other value then I want the class addition to trigger so they become visible...
Any help would be gratefully received.
Cheers all,
Rob.
EDIT:
I also tried the following:
add_action( 'wp_head', function() {
?>
<script>
(function($) {
$(document).on('facetwp-loaded', function() {
if (FWP.loaded) {
$('.facetwp-template').addClass('visible');
$('.facetwp-facet-business_area').addClass('visible');
$('.facetwp-facet-activity').addClass('visible');
$('.facetwp-facet-star_rating').addClass('visible');
}
});
})(jQuery);
</script>
<?php
}, 100 );[/code]
But that doesn't work either... (this edit is to help Multani who asked below...