Selecting one form to be visible using jQuery I'm new to jQuery but have managed to get it working the way I want. The problem is, it's a bit convoluted and could easily get out of hand if I add more options.

I am trying to show and hide divs based on a user's dropdown selection. I've made a JSFiddle with where I am so far, but I think it could do with some streamlining.

I'd like to be able to add five more dropdown options, with five more divs to show or hide. Will I need to hide each of them individually, or is there a way to say "if the div id is not the value selected, then hide it"?

I'm using CF7 to build the form.



$(function() {
    $("select").change(function() {

        if ($(this).val() == "I have a query") {
            $("#cf-query").show("slow");
            $("#cf-booking").hide("slow")
        
        } else if ($(this).val() == "I would like to book") {
            $("#cf-booking").show("slow")
            $("#cf-query").hide("slow")

        } else {
            $(".cf-section").hide("slow");
        }
    });
});
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;h2&gt;What is the nature of your enquiry*:&lt;/h2&gt;

&lt;select id="cf-dd-nature"&gt;
    &lt;option value=""&gt;--&lt;/option&gt;
    &lt;option value="I have a query"&gt;I have a query&lt;/option&gt;
    &lt;option value="I would like to book"&gt;I would like to Book&lt;/option&gt;
&lt;/select&gt;

&lt;div class="cf-section" id="cf-query" style="display: none;"&gt;
    &lt;h2&gt;Query&lt;/h2&gt;
    &lt;p&gt;First Name:&lt;/p&gt;
    &lt;p&gt;Surname*:&lt;/p&gt;
    &lt;p&gt;Email Address*:&lt;/p&gt;
    &lt;p&gt;Telephone number*:&lt;/p&gt;
&lt;/div&gt;


&lt;div class="cf-section" id="cf-booking" style="display: none;"&gt;
    &lt;h2&gt;Booking&lt;/h2&gt;
    &lt;p&gt;First Name:&lt;/p&gt;
    &lt;p&gt;Telephone number*:&lt;/p&gt;
&lt;/div&gt;
Change the option values to the div ids

&lt;option value="cf-query"&gt;I have a query&lt;/option&gt;
…

Hide all elements with class cf-section.
Finally reference the value and show it, no need for the multiple if statements.

$("select").change(function() {
  $(".cf-section").hide();
  id = "#" + $(this).val();
  $(id).show("slow");
}



Now you can add as many as you want and your jQuery function code never changes.