title: Show/Hide Multiple Div's
body: <p>What is the best way to add another class to this script:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(document).ready(function(){
       $('.carlocation').hide();
        $('#parking-options').change(function() {
          $('.carlocation').hide();
          $('#' + $(this).val()).show();
       });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>I am fine with the same ID displaying this classes, I am just unsure about how to add another class to this script. As <code>'.carlocation' , '.insertclass' or '.carlocation .insertclass'</code> does nothing but break the script. </p>
  
  <p>Thanks!</p>
  
  <p>EDIT - The rest of the markup.</p>
  
  <p>I would like .carlocation and .car-position to start off as two hidden divs but in the first drop down when "Self parking" is selected that the other two selections display. </p>
  
  <pre><code>&lt;li&gt;
                      &lt;label for="select-choice-0" class="select"&gt;Parking Method:&lt;/label&gt;
                      &lt;select name="select-choice-15" id="parking-options" data-theme="b" data-overlay-theme="d" data-native-menu="false" tabindex="-1"&gt;
                         &lt;option value=""&gt;Select One&lt;/option&gt;
                         &lt;option value="self"&gt;Self Parking&lt;/option&gt;
                         &lt;option value="auto"&gt;Valet Parking&lt;/option&gt;
                      &lt;/select&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;div id="self" class="carlocation"&gt;
                      &lt;h1&gt;Enter Car Location:&lt;/h1&gt;
                      &lt;label for="select-choice-0" class="select"&gt;Floor:&lt;/label&gt;
                      &lt;select name="select-choice-15" id="location-floor" data-theme="b" data-overlay-theme="d" data-native-menu="false" tabindex="-1"&gt;
                         &lt;option value=""&gt;Floor Select&lt;/option&gt;
                         &lt;option value="f1"&gt;F1&lt;/option&gt;
                         &lt;option value="f2"&gt;F2&lt;/option&gt;
                         &lt;option value="f3"&gt;F3&lt;/option&gt;
                         &lt;option value="f4"&gt;F4&lt;/option&gt;
                      &lt;/select&gt;
                      &lt;/div&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                  &lt;div id="self" class="car-position"&gt;
                  &lt;label for="select-choice-0" class="select"&gt;Row:&lt;/label&gt;
                  &lt;select name="select-choice-15" id="position-row" data-theme="b" data-overlay-theme="d" data-native-menu="false" tabindex="-1"&gt;
                         &lt;option value=""&gt;Row Select&lt;/option&gt;
                         &lt;option value="1"&gt;1&lt;/option&gt;
                         &lt;option value="2"&gt;2&lt;/option&gt;
                         &lt;option value="3"&gt;3&lt;/option&gt;
                         &lt;option value="4"&gt;4&lt;/option&gt;
                         &lt;option value="5"&gt;5&lt;/option&gt;
                         &lt;option value="6"&gt;6&lt;/option&gt;
                         &lt;option value="7"&gt;7&lt;/option&gt;
                  &lt;/select&gt;
                  &lt;li&gt;
  </code></pre>