Show/Hide Multiple Div's

Question

What is the best way to add another class to this script:

<script type="text/javascript">
    $(document).ready(function(){
     $('.carlocation').hide();
      $('#parking-options').change(function() {
        $('.carlocation').hide();
        $('#' + $(this).val()).show();
     });
    });
</script>

I am fine with the same ID displaying this classes, I am just unsure about how to add another class to this script. As '.carlocation' , '.insertclass' or '.carlocation .insertclass' does nothing but break the script.

Thanks!

EDIT - The rest of the markup.

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.

<li>
                    <label for="select-choice-0" class="select">Parking Method:</label>
                    <select name="select-choice-15" id="parking-options" data-theme="b" data-overlay-theme="d" data-native-menu="false" tabindex="-1">
                       <option value="">Select One</option>
                       <option value="self">Self Parking</option>
                       <option value="auto">Valet Parking</option>
                    </select>
                </li>
                <li>
                    <div id="self" class="carlocation">
                    <h1>Enter Car Location:</h1>
                    <label for="select-choice-0" class="select">Floor:</label>
                    <select name="select-choice-15" id="location-floor" data-theme="b" data-overlay-theme="d" data-native-menu="false" tabindex="-1">
                       <option value="">Floor Select</option>
                       <option value="f1">F1</option>
                       <option value="f2">F2</option>
                       <option value="f3">F3</option>
                       <option value="f4">F4</option>
                    </select>
                    </div>
                </li>
                <li>
                <div id="self" class="car-position">
                <label for="select-choice-0" class="select">Row:</label>
                <select name="select-choice-15" id="position-row" data-theme="b" data-overlay-theme="d" data-native-menu="false" tabindex="-1">
                       <option value="">Row Select</option>
                       <option value="1">1</option>
                       <option value="2">2</option>
                       <option value="3">3</option>
                       <option value="4">4</option>
                       <option value="5">5</option>
                       <option value="6">6</option>
                       <option value="7">7</option>
                </select>
                <li>

Answer 1

Hide your elements with CSS:

.carlocation, .car-position {
    display: none;
}

Remove the repeated "self" id from both of the divs, and instead add the "self" value to the class attribute on both:

<li>
    <div class="self carlocation">
        <!-- ... -->
    </div>
</li>
<li>
    <div class="self car-position">
        <!-- ... -->
    </div>
</li>

Side Note: Your second div was missing its closing tag.

Then bind to the change event of the form:

$("#parking-options").on("change", function(){
    $("div.self").toggle( $(this).val() === "self" );
});​​​​​​​​​​

This bases the visibility of all .self divs on the value of the select being "self". If "self" is selected, all div.self items will become visible. Otherwise, they become hidden.

Fiddle: http://jsfiddle.net/jonathansampson/5KJV5/

Or you could slide them into view:

$("#parking-options").on("change", function(){
    $(this).val() === "self"
        ? $("div.self").slideDown()
        : $("div.self").slideUp();
});​

Fiddle: http://jsfiddle.net/jonathansampson/5KJV5/2/

Answer 2

To select multiple selectors try this-

$("selector1,selector2")

It will definetly work. For more information visit jQuery selectors reference.

Answer 3

Your jQuery selector can interact with multiple classes (or any other elements) by making a comma separated list within the quotes of the selector, in other words:

$('.carlocation, .insertclass, .anotherclass').hide();

Edit: Note that case sensitivity can be an issue in some cases, so '.insertclass' is not always the same as '.insertClass' - see JQuery class selectors like $(.someClass) are case sensitive? for more.

It looks like you might have gotten hung up initially by not having all of your selectors in the same quotes. Having a space between classes as in '.carlocation .insertclass' is actually saying "select an element with the class "insertclass" that is a child of an element with class "carlocation"

If you are going to be interacting with the same set of elements more than once, you can optimize your code by assinging them to a variable:

var $myselection = $('.carlocation, .insertclass, .anotherclass');

(note that putting the '$' in the variable name just helps remind you that it's a jQuery object, you could name it whatever you want).

You can now use any of the normal jQuery methods on $myselection:

$myselection.hide();
$myselection.show();

or use it later (so long as the variable is accessible within the scope that you're looking for it, which wouldn't be a problem in your initial example).