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.

Answer 1

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');

Answer 2

$("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();