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>

maybe have a look at: http://stackoverflow.com/questions/1041344/jquery-multiple-class-selector — Andrei Neagu, Jun 07 '12 at 22:11
@shayward The question is a bit confusing. Can you show us your markup, and maybe tell us what effect you want to achieve? — Sampson, Jun 07 '12 at 22:12
added the rest of the markup. Im using Jquery Mobile hence all the extra tags. — shayward, Jun 07 '12 at 22:19

Sampson · Accepted Answer · 2012-06-07T22:55:21.867

4

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/

edited Jun 07 '12 at 22:55

answered Jun 07 '12 at 22:10

Sampson

265,109
74
539
565

Its two elements one has the class carlocation and the other will be .insertclass. I tried that method but for some reason does not work. But when I leave out the insertClass section the script works perfectly fine.\ – shayward Jun 07 '12 at 22:17
Yes and the one selector will activate both – shayward Jun 07 '12 at 22:31
@shayward You can't re-use ID values. And you aren't closing your `.car-position` div either. Please post the rest of your markup, and I'll work on it within http://jsfiddle.net. – Sampson Jun 07 '12 at 22:39
@shayward I've completed a working fiddle. Please see my updated answer. – Sampson Jun 07 '12 at 22:48
Thank you, was really driving me nuts. Your code is definitely alot simpler! – shayward Jun 08 '12 at 14:55

score 1 · Answer 2 · edited May 23 '17 at 12:12

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).

To expand on these points, in CSS selectors (and in jQuery selectors) a comma is considered an "or" and not leaving a space is considered an "and". — Wex, Jun 07 '12 at 22:27

score 1 · Answer 3 · answered Jun 07 '12 at 22:25

1

To select multiple selectors try this-

$("selector1,selector2")

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

answered Jun 07 '12 at 22:25

NewUser

289
2
14

Show/Hide Multiple Div's

3 Answers3