Showing/Hiding content based on drop down

JavaScript
14

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.

2 Likes