cómo ocultar varios selectores como una vez con jQuery

Question

¿Cómo puede ser esto ..

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

¿no equvalent a este ...

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

que se produce en un evento de clic, pero doesn' t funciona igual que escribiendo manualmente múltiples etiquetas hide(). Solo trato de reducir el uso de la etiqueta hide() para cada div que continúo agregando dentro de mi padre #container div.

Answer 1

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

O simplemente dar a cada elemento DOM que va a ocultar la misma clase y que sólo puede hacer:

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

Answer 2

Usted puede controlar fácilmente a través de CSS. Agregue un contenedor oculto de clase a principal que tendrá un estilo display:none. Si no desea display:none para div con clase toggle2, modifique el estilo de este elemento. De esta forma, no tienes que llamar a hide en todos los contenedores o seleccionar todos los contenedores y llamar al método hide.

probar este

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