title: Using FacetWP and wanting to hide extra facets until the first one is selected
body: <p>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.</p>
  <p>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.</p>
  <pre><code>&lt;script&gt;
  (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);
  &lt;/script&gt;
  </code></pre>
  <p>This obviously has the corresponding CSS:</p>
  <pre><code>.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;}
  </code></pre>
  <p>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...</p>
  <p>Any help would be gratefully received.</p>
  <p>Cheers all,</p>
  <p>Rob.</p>
  <p>EDIT:</p>
  <p>I also tried the following:</p>
  <pre><code>    add_action( 'wp_head', function() {
      ?&gt;
      &lt;script&gt;
      (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);
      &lt;/script&gt;
      &lt;?php
      }, 100 );[/code]
  </code></pre>
  <p>But that doesn't work either... (this edit is to help Multani who asked below...</p>