¿Cómo comenzar mi jquery alternando como oculto?

Tengo un código que muestra tres imágenes y un div respectivo debajo de cada imagen. Utilizando la función jquery .toggle lo hice para que cada div se active cuando se haga clic en la imagen de arriba. ¿Hay alguna forma de hacerlo para que los divs comiencen como ocultos?¿Cómo comenzar mi jquery alternando como oculto?

Gracias por su tiempo,

CÓDIGO DE REFERENCIA:

<html> 
<head> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$("#picOne").click(function(){ 
$("#one").toggle(250); 


}); 

$("#picTwo").click(function(){ 
    $("#two").toggle(250); 
    }); 


    $("#picThree").click(function(){ 
    $("#three").toggle(250); 
    }); 

}); 
</script> 
</head> 

<body> 


    <center> 
    <h2>Smooth Transitions</h2> 


    <img src="one.png" id="picOne"> 
     <div id="one"> 
     <p>first paragraph.</p> 
     </div> 

    <img src="two.png" id="picTwo"> 

     <div id="two" visibility="hidden"> 
     <p>Second Pair of giraffe.</p> 
     </div> 


    <img src="three.png" id="picThree"> 

     <div id="three"> 
     <p>Thiird paragraph.</p> 
     </div> 



</center> 
</body> 
</html>

Fuente

2011-12-27 John

visibility es una css propiedad. Sin embargo, la pantalla es lo que quiere en todo caso

<div id="two" style="display:none;"> 
    <p>Second Pair of giraffe.</p> 
</div>

O deshacerse de la CSS en línea y dar a cada div a ser fijada una clase css

<div id="two" class="initiallyHidden">

y luego

.initiallyHidden { display: none; }

Y también puedes limpiar tu jQuery un poco. Dé a sus imágenes de palanca que causan una clase css

<img src="one.png" class="toggler"> 
    <div> 
    <p>first paragraph.</p> 
    </div>

Y luego

$("img.toggler").click(function(){ 
    $(this).next().toggle(250); 
});

Esto obviaría su necesidad de todas esas identificaciones, y que también haría esta solución mucho, mucho más extensible.

Y para manejar el contenido agregado dinámicamente, podría utilizar on en lugar de click

$(document).on("click", "img.toggler", function(){ 
    $(this).next().toggle(250); 
});

(y para un mejor rendimiento, asegúrese de que todas estas imágenes alternar son de alguna div contenedor, llamado, por ejemplo, containerFoo, a continuación, hacer $("#containerFoo").on en lugar de $(document).on(

Fuente

2011-12-27 18:37:32

Me encantó la parte acerca de la limpieza de mi jQuery! Para mayor flexibilidad, puede utilizar un atributo de datos en el toggler, como 'data-toggles-element:" div-id "'. – nitsas

con CSS:

#one, #two, #three { display: none; }

con jQuery

$(function() { //once the document is ready 
    $('h2').nextAll('img') //select all imgs following the h2 
    .find('div') //select all contained divs 
    .hide(); 
})

Por cierto, en lugar de utilizar los selectores de ID probablemente debería usar clases

Fuente

2011-12-27 18:39:55

+1 para CSS y sugerencia de clase. – MetalFrog

Sólo tiene que añadir style="display: none;" a la div. Esto iniciará la clase div como oculta.

Cuando el jQuery alterna el bloque, estilo, entonces se cambiará para bloquear

Fuente

2016-08-20 03:50:21

¿Cómo comenzar mi jquery alternando como oculto?

Respuesta

Cuestiones relacionadas