Mostrar/ocultar capas

hgp147 · #1 (**permalink**) 23/07/2007, 17:53

Hola, encontre un código que sirve para mostrar y ocultar capas, funciona perfectamente, pero lo quiero saber si en vez de tener una funcion llamada mostrar1, mostrar2 y mostrar3 (lo mismo con la funcion ocultar), podria tener una sola funcion llamada por ejemplo mostrar y que sirva para las 3 capas.

Código HTML:

<html>
<head>

<script>

OCULTO="none";
VISIBLE="block";
	
function mostrar1(blo) {
  document.getElementById(blo).style.display=VISIBLE;
  document.getElementById('ver_off1').style.display=VISIBLE;
  document.getElementById('ver_on1').style.display=OCULTO;
}
 
function ocultar1(blo) {
  document.getElementById(blo).style.display=OCULTO;
  document.getElementById('ver_off1').style.display=OCULTO;
  document.getElementById('ver_on1').style.display=VISIBLE;
}
</script>

<script>

OCULTO="none";
VISIBLE="block";
	
function mostrar2(blo) {
  document.getElementById(blo).style.display=VISIBLE;
  document.getElementById('ver_off2').style.display=VISIBLE;
  document.getElementById('ver_on2').style.display=OCULTO;
}
 
function ocultar2(blo) {
  document.getElementById(blo).style.display=OCULTO;
  document.getElementById('ver_off2').style.display=OCULTO;
  document.getElementById('ver_on2').style.display=VISIBLE;
}
</script>


<script>

OCULTO="none";
VISIBLE="block";
	
function mostrar3(blo) {
  document.getElementById(blo).style.display=VISIBLE;
  document.getElementById('ver_off3').style.display=VISIBLE;
  document.getElementById('ver_on3').style.display=OCULTO;
}
 
function ocultar3(blo) {
  document.getElementById(blo).style.display=OCULTO;
  document.getElementById('ver_off3').style.display=OCULTO;
  document.getElementById('ver_on3').style.display=VISIBLE;
}
</script>



</head>
<body>


<div id="ver_on1"><a href="#" onclick="mostrar1('bloque1'); return false">Mostrar bloque1</a></div>

<div id="ver_off1" style="display: none"><a href="#" onclick="ocultar1('bloque1'); return false">Ocultar bloque1</a></div>

<div id="bloque1" style="display: none">
<p>Contenido bloque1</p>
</div>




<div id="ver_on2"><a href="#" onclick="mostrar2('bloque2'); return false">Mostrar bloque2</a></div>

<div id="ver_off2" style="display: none"><a href="#" onclick="ocultar2('bloque2'); return false">Ocultar bloque2</a></div>

<div id="bloque2" style="display: none">
<p>Contenido bloque2</p>
</div>






<div id="ver_on3"><a href="#" onclick="mostrar3('bloque3'); return false">Mostrar bloque3</a></div>

<div id="ver_off3" style="display: none"><a href="#" onclick="ocultar3('bloque3'); return false">Ocultar bloque3</a></div>

<div id="bloque3" style="display: none">
<p>Contenido bloque3</p>
</div>




</body>
</html>

Gracias

PosProdukcion · #2 (**permalink**) 24/07/2007, 02:16

Si, simplemente añades dos parametros a las funciones:

Código:

<script>

OCULTO="none";
VISIBLE="block";
	
function mostrar(blo, ver_off, ver_on) {
  document.getElementById(blo).style.display=VISIBLE;
  document.getElementById(ver_off).style.display=VISIBLE;
  document.getElementById(ver_on).style.display=OCULTO;
}
 
function ocultar(blo, ver_off, ver_on) {
  document.getElementById(blo).style.display=OCULTO;
  document.getElementById(ver_off).style.display=OCULTO;
  document.getElementById(ver_on).style.display=VISIBLE;
}
</script>

Cuando lo llames, deberas dar a ver_off (el parametro va sin comillas) los valores 'ver_off1', 'ver_off2' y 'ver_off3' (los valores si llevan comillas) e idem con ver_on

hgp147 · #3 (**permalink**) 24/07/2007, 16:31

Hola PosProdukcion gracias por tu ayuda. Pero como tengo que hacer para que cuando hago clic en mostrar bloque x , me muestre el contenido de esa capa (o bloque) y tambien me muestre ocultar bloque x y ademas que no se vea mostrar bloque x.

Este es el código con las modificaciones que me dijiste, capaz que me equivoque en algo...

Código HTML:

<html>
<head>
<script>

OCULTO="none";
VISIBLE="block";
	
function mostrar(blo, ver_off, ver_on) {
  document.getElementById(blo).style.display=VISIBLE;
  document.getElementById(ver_off).style.display=VISIBLE;
  document.getElementById(ver_on).style.display=OCULTO;
}
 
function ocultar(blo, ver_off, ver_on) {
  document.getElementById(blo).style.display=OCULTO;
  document.getElementById(ver_off).style.display=OCULTO;
  document.getElementById(ver_on).style.display=VISIBLE;
}
</script>

</head>
<body>

<body>

<div id="ver_on1"><a href="#" onclick="mostrar('bloque1'); return false">Mostrar bloque1</a></div>

<div id="ver_off1" style="display: none"><a href="#" onclick="ocultar('bloque1'); return false">Ocultar bloque1</a></div>

<div id="bloque1" style="display: none">
<p>Contenido bloque1</p>
</div>




<div id="ver_on2"><a href="#" onclick="mostrar('bloque2'); return false">Mostrar bloque2</a></div>

<div id="ver_off2" style="display: none"><a href="#" onclick="ocultar('bloque2'); return false">Ocultar bloque2</a></div>

<div id="bloque2" style="display: none">
<p>Contenido bloque2</p>
</div>






<div id="ver_on3"><a href="#" onclick="mostrar('bloque3'); return false">Mostrar bloque3</a></div>

<div id="ver_off3" style="display: none"><a href="#" onclick="ocultar('bloque3'); return false">Ocultar bloque3</a></div>

<div id="bloque3" style="display: none">
<p>Contenido bloque3</p>
</div>




</body>
</html>

En este link http://www.tufotolog.webniverso.com/147_1.php podes ver el codigo de arriba.

Gracias

PosProdukcion · #4 (**permalink**) 25/07/2007, 01:01

A ver, te explico un poco lo que hace cada cosa:

document.getElementById(blo) Localiza un elemento por su ID (en este caso cuyo ID sea igual a blo), podría ser tu capa <div id="ver_on1"> o la capa <div id="bloque1" style="display: none">
document.getElementById(blo).style.display=VISIBLE u OCULTO; hace que cada cosa localizada por su id (en este caso una capa) se haga visible o invisible

En tu caso, al pulsar en "Mostrar bloque1" quieres que se muestre la capa <div id="bloque1"> con su contenido, y al mismo tiempo quieres que desaparezca el texto
"Mostrar bloque1" (que tiene id "ver_on1") y aparezca el texto "Ocultar bloque1" (que tiene id "ver_off1")

Entonces, en las llamadas tienes que poner:

Código:

<div id="ver_on1"><a href="#" onclick="mostrar('bloque1', 'ver_off1', 'ver_on1'); return false">Mostrar bloque1</a></div>

<div id="ver_off1" style="display: none"><a href="#" onclick="ocultar('bloque1', 'ver_off1', 'ver_on1'); return false">Ocultar bloque1</a></div>

De todas formas me parece un poco enrevesado...
PD: No he probado el codigo, asi que igual he puesto on donde era off o me he liado, espero que te apañes

PosProdukcion · #5 (**permalink**) 25/07/2007, 01:10

Te pongo un código que yo creo q es más sencillo, no se si te voy a liar mas, pero si solo quieres mostrar u oclutar párrafos no es necesario que crees una capa para cada cosa, yo tengo esta función que muestra u oculta párrafos y cambia el texto de ayuda del enlace (tooltip) por mostrar u ocultar:

Código:

function MostrarOcultar(parr)
{
	var np = 'p' + parr; /*numero de parrafo*/
	var na = 'a' + parr; /*numero de enlace*/

	var elem = document.getElementById(np);
	var enlace = document.getElementById(na);

	if (elem.style.display=='block')
	{
		/*si esta visible lo oculta y cambia el texto del enlace*/
		elem.style.display = 'none';
		enlace.title = 'Ampliar información';
	}
	else
	{
		/*si esta oculto lo muestra y cambia el texto del enlace*/
		elem.style.display = 'block';
		enlace.title = 'Ocultar información';
	}
	return;
}

Despues, en cada parrafo pones una numeracion consecutiva, con id = a1, a2, a3... para los links de títulos y con p1, p2, p3... para los párrafos de contenido:

Código:

		<p>
		<a href="#" title="Ampliar informaci&oacute;n" id="a1" OnClick="MostrarOcultar('1'); return false">
		Titulo del parrafo 1
		</a>
		</p>
		<p class="TextoParrafoOculto" id="p1">
                bla bla bla
		<br /><br />
                bla bla bla
		</p>

		<p>
		<a href="#" title="Ampliar informaci&oacute;n" id="a2" OnClick="MostrarOcultar('2'); return false">
		Titulo del parrafo 2
		</a>
		</p>
		<p class="TextoParrafoOculto" id="p2">
                bla bla bla
		<br /><br />
                bla bla bla
		</p>

Aqui tienes un ejemplo de funcionamiento, al hacer clic sobre el titulo se muestra u oculta el parrafo: http://www.foromovilidadsostenible.org/m30/quieres.htm

hgp147 · #6 (**permalink**) 27/07/2007, 16:24

Gracias PosProdukcion el código me funciono perfecto!!!