Mostrar/Ocultar capas sin dejar el espacio que ocupan

[aeks]

Hola buenas, lo que yo quiero hacer es que se muestre o se oculte una capa pulsando un enlace, el problema es que aunque me oculte la capa, deja el espacio que ocuparia la capa sio estuviese visible.

[JavierB]

Hola aeks

Supongo que estás usando visibility=visible/hidden Cámbialo por display:block/none

Saludos,

[Asyolath]

Una de dos:

O le das posición absoluta a las capas...
...o en la función de ocultar capas redimensionas las capas a 0px por 0px y en la función de mostrar capas la vuelves a redimensionar a su tamaño por defecto.

Si posteas tu script quizás pueda ayudarte mejor

Edit: O haces lo que dice JavierB :D

[aeks]

Gracias Asyolath, pero la solución que me ha dado JavierB ha sido suficiente me ha servido.

[tav]

disculpen, estoy diseñando una pagina, y quiero usar lo mismo, pero no entiendo porque no funciona, tengo un caos completo, intente hacer lo que javier recomendo y no funciona, es la primera vez que manejo, javascript.
Utilizo Dreamweaver MX 2004, (me quede un poco atras por cierto, jaja)

Bueno, como les decia, aqui estan dos imagenes del error que ocurre:

http://www.angelfire.com/hero2/gao3_red/5.JPG

Y Esto ocurre cuando le doy click a la imagen, de la flecha..

http://www.angelfire.com/hero2/gao3_red/6.JPG

No sólo oculta la primera capa que dice, "Ver más" sino que la segunda capa se encima...

Lo que quiero es que al darle click se despliegue la segunda capa, y que la primera se oculte, y la pagina se redimensione, y tambien a la inversa para poder ocultar la capa, y se vuelva a redimensionar a su estado inicial.

¿Alguien puede ayudarme?

[elbuensaint]

prueba con esto, en el head

Código:

<script language="javascript">
function MostrarOcultar (objetoVisualizar) {
if (document.getElementById(objetoVisualizar).style.display=='none') {
document.getElementById(objetoVisualizar).style.display='block';
} else {
document.getElementById(objetoVisualizar).style.display='none';
}
}
</script>

y esto para mostrar/ocultar el contenido:

Código:

<div style="display:block;"><a href="#" onClick="MostrarOcultar('mostrar')">Click Aquí</a></div>
<div id="mostrar" style="display:none;">
Texto oculto
</div>

[tav]

Iniciado por elbuensaint

prueba con esto, en el head

Código:

<script language="javascript">
function MostrarOcultar (objetoVisualizar) {
if (document.getElementById(objetoVisualizar).style.display=='none') {
document.getElementById(objetoVisualizar).style.display='block';
} else {
document.getElementById(objetoVisualizar).style.display='none';
}
}
</script>

y esto para mostrar/ocultar el contenido:

Código:

<div style="display:block;"><a href="#" onClick="MostrarOcultar('mostrar')">Click Aquí</a></div>
<div id="mostrar" style="display:none;">
Texto oculto
</div>

ya me funciono! :D muchas gracias, el unico problema es que al darle click al link el # hace q me lleve al "top" de la pagina, no hay forma de que no me lleve alla el link?..

[elbuensaint]

nada, asi como esta funciona, la accion la hace el "onclick" que llama a la funcion de javascript MostrarOcultar con el id del div, en este caso "mostrar". Segun lo que veo quieres que al dar click en la imagen de la flecha se muestre, pues quedaria algo asi:

Código:

<a href="#" onClick="MostrarOcultar('mostrar')"><img src="url-a-tuimagen" /></a>
<div id="mostrar" style="display:none;">
Texto oculto
</div>

[tav]

Iniciado por elbuensaint

nada, asi como esta funciona, la accion la hace el "onclick" que llama a la funcion de javascript MostrarOcultar con el id del div, en este caso "mostrar". Segun lo que veo quieres que al dar click en la imagen de la flecha se muestre, pues quedaria algo asi:

Código:

<a href="#" onClick="MostrarOcultar('mostrar')"><img src="url-a-tuimagen" /></a>
<div id="mostrar" style="display:none;">
Texto oculto
</div>

si, asi lo tengo, bueno, perfecto, muchas gracias! :D

[JessyF]

Retomo esta aportación de JavierB, primero para agradecer lo útil que me han sido sus colaboraciones. Y segundo para ver si la comunidad puede ayudar con esto:

Resulta que tengo una lista de proyectos, que mediante la función ocultar / mostrar texto quisiera mostrar su detalle uno a uno. Por ejemplo:

Proyecto1
"texto con detalles del mismo..."
Proyecto2
"texto con detalles del mismo..."
Proyecto3
"texto con detalles del mismo..."

A todos ellos aplico el scrip:

<a href="#" onclick="MostrarOcultar('mostrar')">+</a>
<div id="oculto" style="display: none">
"texto con detalles del mismo..."
</div>

Pero al probarlo sólo me aparece o desaparece el primero (Proyecto1) y el resto no lo muestra, aún cuando presentan cada uno su símbolo y contenido (+); al probarlo no lo abre y me activa automáticamente el primero.

P.d
Coloque en el Head:
<script language="javascript">
function MostrarOcultar (objetoVisualizar) {
if (document.getElementById(objetoVisualizar).style.d isplay=='none') {
document.getElementById(objetoVisualizar).style.di splay='block';
} else {
document.getElementById(objetoVisualizar).style.di splay='none';
}
}
</script>
<script>
function mostrar(enla) {
obj = document.getElementById('oculto');
obj.style.display = (obj.style.display == 'block') ? 'none' : 'block';
enla.innerHTML = (enla.innerHTML == '-') ? '+' : '-';
}
</script>
</head>

Saludos y gracias desde ya!.

[decinti]

Saludos amigos, perdonar la ignorancia, quiero mostrar/ocultar simultáneamente varios DIV y utilizo esta excelente función que me gustaría saber si se puede resumir, porque entiendo que se puede reducir a una mínima expresión:


<script>
function mostrar(enla) {
obj = document.getElementById('oculto');
obj.style.display = (obj.style.display == 'block') ? 'none' : 'block';
enla.innerHTML = (enla.innerHTML == 'Ocultar todo') ? 'Mostrar todo' : 'Ocultar todo';
}
function mostrar1(enla) {
obj = document.getElementById('oculto1');
obj.style.display = (obj.style.display == 'block') ? 'none' : 'block';
enla.innerHTML = (enla.innerHTML == 'Ocultar todo') ? 'Mostrar todo' : 'Ocultar todo';
}
function mostrar2(enla) {
obj = document.getElementById('oculto2');
obj.style.display = (obj.style.display == 'block') ? 'none' : 'block';
enla.innerHTML = (enla.innerHTML == 'Ocultar todo') ? 'Mostrar todo' : 'Ocultar todo';
}
</script>
</head>
<body>
<a href="#" onClick="mostrar(this);mostrar1(this);mostrar2(thi s); return false" />Mostrar todo</a>
<div id="oculto" style="display:none">
Este texto se verá cuando yo quiera
</div>
<div id="oculto1" style="display:none">
Este texto se verá cuando yo quiera
</div>
<div id="oculto2" style="display:none">
Este texto se verá cuando yo quiera
</div>
<p>Texto visible</p>
</body>


un gran abrazo