How to hide multiple selectors at once using jQuery

Question

How come ..

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

not tantamount to this ...

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

which occurs in the click event, but it doesn’t work the same way as it manually prints a few hide () tags. I'm just trying to reduce the use of hide () tags for each div, which I continue to add to my parent div #container.

Answer 1

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

Or simply tell each DOM element that you will hide the same class, and you can simply do:

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

Answer 2

You can easily manage it through css. Add a hidden class to the parent container, which will have a display:none style. If you do not want display:none for a div with the class toggle2 , then redefine the style for this element. Thus, you do not need to call hide on all containers or select all containers and the hide invocation method.

try it

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