div oculto y mostrado

guntin_java · #1 (**permalink**) 20/02/2005, 14:01

Hola...

Necesito tener una parte de mi página, específicamente una tabla, oculta. Y un botón o una imagen que al usuario dar click se muestre.

gracias

DeLaVega · #2 (**permalink**) 20/02/2005, 18:52

Te hice un ejemplo a ver si te sirve. Funciona tanto para mostrar como para ocultar. Podés probar como variante usar la propiedad display en vez de visibility (visibility te mantiene el espacio que ocupa la tabla, display no).
Saludos, espero te sirva

Código:

<html>
<head>
<script language="Javascript">
	function mostrar() {
		var unaTabla, mostrar;
		unaTabla = document.getElementById("unaTabla");
		if(unaTabla.style.visibility == "hidden") {
			unaTabla.style.visibility = "visible";
			mostrar = document.getElementById("mostrar").childNodes[0];
			mostrar.data = "Ocultar";
		}
		else {
			unaTabla.style.visibility = "hidden";
			mostrar = document.getElementById("mostrar").childNodes[0];
			mostrar.data = "Mostrar";
		}

	}
</script>
</head>

<body>

<table border="1" id="unaTabla" style="visibility: hidden;">
	<tr>
		<td>Nombre</td><td>Apellido</td>
	</tr>
	<tr>
		<td>Juan</td><td>Pérez</td>
	</tr>
	<tr>
		<td>Mariana</td><td>Fernández</td>
	</tr>
	<tr>
		<td>Claudio</td><td>Rodríguez</td>
	</tr>
</table>

<a id="mostrar" href="javascript:mostrar();">Mostrar</a>
</body>
</html>

posavasos · #3 (**permalink**) 20/02/2005, 20:26

http://www.onlinetools.org/tools/domcollapse.php

guntin_java · #4 (**permalink**) 21/02/2005, 05:45

mil gracias a todos

Flashera · #5 (**permalink**) 21/02/2005, 17:55

www.cssboulevar.com.ar/leer.php/articulo/3

KarlanKas · #6 (**permalink**) 22/02/2005, 02:24

Vámonos a Javascript

ratcarlos · #7 (**permalink**) 22/02/2005, 04:16

como se haria para que pinchando en una imagen se viese una capa?

DeLaVega · #8 (**permalink**) 22/02/2005, 04:23

Igual que con un link común. Fijate en el ejemplo que puse al principio, y probá de poner en el link una imagen, debería funcionar.
La capa en este caso es la tabla.
Saludos

ratcarlos · #9 (**permalink**) 22/02/2005, 04:42

Gracias, ya funciona!

He intentado hacer uno por mi cuenta y no me funciona, alguien sabe en que me he equivocado???

----------------------------------------

<html>
<head>
<script language="Javascript">
function mostrar() {
var layer1, mostrar;
layer1 = document.getElementById("layer1");
if(layer1.style.visibility == "hidden") {
layer1.style.visibility = "visible";
mostrar = document.getElementById("mostrar").childNodes[0];
mostrar.data = "Ocultar";
}
else {
layer1.style.visibility = "hidden";
mostrar = document.getElementById("mostrar").childNodes[0];
mostrar.data = "Mostrar";
}

}
</script>

</head>

<body>

<div id="Layer1" style="position:absolute; width:200px; height:115px; z-index:2; background-color: #0033FF; layer-background-color: #0033FF; border: 1px none #000000; left: 44px; top: 22px; color: #FFFFFF; visibility: hidden;">un poquito de porfavor </div>

<div id="Layer2" style="position:absolute; width:173px; height:160px; z-index:3; left: 458px; top: 23px; background-color: #990000; layer-background-color: #990000; border: 1px none #000000; visibility: visible;"><a id="mostrar" href="javascript:mostrar();"><img src="mis%20cosillas/Nota.png"></a></div>
</body>
</html>

-----------------------------

fgar015 · #10 (**permalink**) 25/04/2012, 11:54

aca encontre esto:
Para mostrar y ocultar un div debemos instanciar un div con un ID único y en el estilo incluir style=”display:none;” por ejemplo:
<div id=”flotante” style=”display:none;”> </div>

Luego debemos realizar dos funciones en javascript para mostrar y ocultar dicho div respectivamente.

<script>

function mostrardiv() {

div = document.getElementById('flotante');

div.style.display ='';

}

function cerrar() {

div = document.getElementById('flotante');

div.style.display='none';

}

</script>

Una vez hecho esto, tenemos las funciones en javascript que mostrarán y ocultarán el div cuando el usuario haga click en una imagen o un texto con el link a la función, como en el siguiente ejemplo:

<div id=”mostrarDiv”><a href=”javascript:mostrardiv();”>Mostrar Div</a></div>
<div id=”flotante” style=”display:none;”> Este es un div oculto <br><a href=”javascript:cerrar();”> presiona aquí para cerrar</a> </div>