How to hide multiple selectors as once with jQuery

Question

How come this..

    $("div.toggle1").hide();
    $("div.toggle3").hide();
            $("div.toggle4").hide();
            $("div.toggle5").hide();

is not equvalent to this...

           $('#container div').not('.toggle2').hide();

that occurs on a click event, but it doesn't work the same as manually typing out multiple hide() tags. I'm just trying to reduce the hide() tag usage for every div I keep adding on within my parent #container div.

Try to remove `#container` from the selector in the second case. Is the result the same in both cases now? — Tadeck, Nov 21 '11 at 20:09
The two are equivalent for me.. see: http://jsfiddle.net/jli1/nVNDA/ (just comment/uncomment and rerun) — jli, Nov 21 '11 at 20:10

score 36 · Accepted Answer · answered Nov 21 '11 at 20:10

36

$("div.toggle1, div.toggle3, div.toggle4, div.toggle5").hide();

Or just give every DOM element that you will hide the same class and you can just do:

$('.hideClass').hide();

answered Nov 21 '11 at 20:10

Naftali

144,921
39
244
303

Ok, I didn't know you could add multiple selectors to the beginging like that and seperate them with commas. thats cool and worked for me. – klewis Nov 21 '11 at 20:15
perfecto. hehehe – winnie damayo Sep 16 '17 at 08:03
I really like the option of using a pseudo-class. That's really the cleanest way to do it, in my opinion. – donperk Sep 03 '20 at 21:03

score 0 · Answer 2 · answered Nov 21 '11 at 20:19

You can easily control it through css. Add a hidden class to parent container which will have a display:none style in it. If you don't want display:none for div with class toggle2 then override the style for this element. In this way you dont have to call hide on all the containers or select all the containers and call hide method.

Try this

.hidden{
   display:none;
}

.hidden .toggle2{
   display:block;
}

//This will add hidden class to the container which will 
//ultimately hide all the inner divs except div with class toggle2
$('#container').addClass('hidden');

How to hide multiple selectors as once with jQuery

2 Answers2

Linked