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


        

Answer 1

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

Answer 2

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