APARECER E INVISIBILIZAR
Para hacer aparecer o invisibilizar elementos,
podemos usar identificadores de clases (.xxx), id (#xxx) o
directamente etiquetas (xxx).
En el ejemplo usamos la función de clase .css("atributo css", "valor").
Observar que al usar display none/block no se reserva el espacio en cambio
con visibility hidden/visible la div se carga ( con dimensiones y reserva
de espacio.
<head>
<style<
div{
font-family:Arial;
font-size:12px;
}
</style<
<script src="../scripts/jquery-1.7.1.min.js"></script>
<script>
$(document).ready(function(){
$("#accion").click(function(evento){
if($("#imagen").css("display")=='none'){
$("#imagen").css("display","block");
}else{
$("#imagen").css("display","none");
}
});
$("#boton").click(function(evento){
if($("#imagen1").css("visibility")=='hidden'){
$("#imagen1").css("visibility","visible");
}else{
$("#imagen1").css("visibility","hidden");
}
});
});
</script>
</head>
<body>
<div id="capa"> Al chequearla se verá la imagen (css: display: none / block )
<input type="checkbox" id="accion">
</div>
<div id="imagen" style="margin-top:50px; display:none;">
<div><img src="img/testchico.jpg" width="200" height="150" style="
border:transparent 2px solid;">
</div>
<div>
Este epígrafe va junto con la imagen
</div>
</div>
<div style="margin-top:5px;">
Este texto se correrá hacia abajo
</div>
<div id="capa1"> Clickear (css: visibility: hidden / visible)
<input type="submit" name="boton" id="boton" value="Aparecer/desaparecer">
</div>
<div id="imagen1" style="margin-top:50px; visibility:hidden;">
<div>
<img src="img/testchico.jpg" width="200" height="150" style="
border:transparent 2px solid;">
</div>
<div>
Este epígrafe tambien va junto con la imagen
</div>
</div>
<div style="margin-top:5px;">
Este texto NO se correrá hacia abajo
</div>
</body>