Using FacetWP and wanting to hide extra facets until the first one is selected

714 Views Asked by At

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...

0

There are 0 best solutions below