Showing/Hiding content based on drop down

[toolman]

Hi there,

I have a search form on this website:

Home - Banstead Local

(you will need to click the “search” link in the nav to view the form)

I then have 3 divs under the form.

What I am wanting to do is only show one at a time, but change depending on which option is selected from the dropdown to the left in the form.

I have tried this:

jQuery(function () {
jQuery(“li#select2-8dri-result-zi6u-shops-and-businesses”).click(function () {
jQuery(“#shops”).show(“slow”);
jQuery(“#shops”).hide(“slow”);
});

jQuery(“li#select2-8dri-result-xf1a-event”).click(function () {
jQuery(“#jobs”).show(“slow”);
jQuery(“#jobs”).hide(“slow”);
});

jQuery(“li#select2-8dri-result-em9v-jobs”).click(function () {
jQuery(“#events”).show(“slow”);
jQuery(“#events”).hide(“slow”);
});
});

But it doesn’t seem to work.

Can anyone assist on what I have done wrong?

P.S. Is there a way to add a nofollow to the above link so search engines don’t pick it up?

Thanks!

[Paul_Wilkins]

How this is done is to first of all hide all of dropdowns, and only after that to show the one that needs to be shown.

[toolman]

Thanks for the reply.

I did try that by using style=“display: none” and removing the display: flex, but it still didn’t work (the code I have)

[PaulOB]

@toolman

I did try that by using style=“display: none” and removing the display: flex, but it still didn’t work (the code I have)

The d-flex in the css has important on it so that will over-ride the display:none even when in the style attribute.

There is a way around this and you can use css to force the display back to what’s required.

Add this css after the original.

/*white space is important after display: */
#shops.d-flex[style*="display: block"],
#jobs.d-flex[style*="display: block"],
#events.d-flex[style*="display: block"] {
  display: flex !important;
}
#shops.d-flex[style*="display: none"],
#jobs.d-flex[style*="display: none"],
#events.d-flex[style*="display: none"] {
  display: none !important;
}

Now the js hide and show will work but it’s a little complex.

As far as the JS goes this seems to work but I’m sure @Paul_Wilkins will have better suggestions.

    jQuery(document).ready(function() {
      jQuery("#shops,#jobs,#events").hide();/* hide all */
      jQuery("#shops").show();/* show one by default*/
      jQuery(".mlduo-select").on("select2:select",
        function(index) {
          var selectedItem = jQuery(this).select2().val();
          console.log(selectedItem);
          jQuery("#shops,#jobs,#events").hide();
          switch (selectedItem) {
            case "event":
              jQuery("#events").show();
              break;
            case "jobs":
              jQuery("#jobs").show();
              break;
            case "shops-and-businesses":
              jQuery("#shops").show();
              break;
          }
        });
    });

[toolman]

Thanks! I have added that and it now displays the first one as default and hidden the others, but doesn’t seem to change when selecting the other two items from the drop down.

[PaulOB]

I have it working in a private pen here.

Where did you add the script I gave?

[toolman]

Very odd. I can see your code that I have added to the site, but doesn’t seem to be working

[PaulOB]

Where is the code I gave you? What file is it located in?

It really needs to be at the end of the html like my codepen.

[toolman]

It’s in a JS file located here:
https://www.bansteadlocal.co.uk/wp-content/themes/my-listing-child/js/custom.js?ver=5.7.8

[PaulOB]

@toolman

It’s in a JS file located here:

That file is called before select2 even runs (as its further down the html) so it will know nothing about it.

Your custom.js file really should be last in source but it must at least follow the file that instigates select2.

[toolman]

I see. I have basically added that JS file by enqueuing it in WordPress. I am not sure how to enqueue it right at the bottom of the page. I’ll do some investigating.

[toolman]

I have now managed to get it to work by changing to load order of the JS file.

Thank you very much for your help with this, very much appreciated!

[PaulOB]

@toolman

I have now managed to get it to work by changing to load order of the JS file.

Great glad that sorted it.

[Paul_Wilkins]

Now that things are working, I would improve the code by updating the selection so that the same name for the same things are used.

Instead of select option of “event” and HTML element “events”, have “events” for both.
Instead of select option of “shops-and-businesses” and HTML element “shops”, use “shops” for both, or “shops-and-businesses” for both.

That way the switch statement can be removed, and the value of the select option can be used to directly control which items get shown.

      jQuery(".mlduo-select").on("select2:select", function() {
          jQuery("#shops,#jobs,#events").hide();
          var selectedItem = jQuery(this).select2().val();
          jQuery("#" + selectedItem).show();
      });

Also, if the HTML sections can all be given the same classname of “panels” or some other more suitable name, then those don’t need to be separately called out in the scripting code either.

      jQuery(".mlduo-select").on("select2:select", function() {
          jQuery(".panels").hide();
          var selectedItem = jQuery(this).select2().val();
          jQuery("#" + selectedItem).show();
      });

That way, the HTML code can be updated in several different ways in the future, without needing to break any of the existing JavaScript code in the process.