Problema con capas

tbass · #1 (**permalink**) 15/12/2008, 09:22

Hola. Soy novato en Javascript (no he salido mucho de PhP y MySql, xD). Y se me ha planteado este problema:

Código HTML:

<html>
<head>
<script LANGUAGE="javascript">
function oculta(capa){
 document.getElementById(capa).style.visibility = "hidden";
}
function muestra(capa){
 document.getElementById(capa).style.visibility = "visible";
}
</script>
</head>
<body>

<a href="#" onclick="muestra('capa1')"> (Mostrar opciones avanzadas)</a>
<br>
<a href="#" onclick="oculta('capa1')"> (Ocultar opciones avanzadas)</a>

<div id="capa1" style='position:relative;'>
<table width='100%'>
<tr>
<td bgcolor='black' align='center'>HOLA</td>
</tr>
</table>
</div>
<script>oculta('capa1');</script>
</body>
</html>

Explico brevemente: al hacer click en mostrar opciones avanzadas nos muestra la tabla (que hemos ocultado antes). Al hacer click en ocultar opciones avanzadas desaparece la tabla (en la capa "capa1").

Lo que quiero hacer es previsible: al hacer click en mostrar opciones avanzadas quitar ese mensaje y en su lugar poner "ocultar opciones avanzadas" (además de realizar su efecto correspondiente.)

Muchas gracias!

Fbae

masterojitos · #2 (**permalink**) 15/12/2008, 09:31

mas practico seria asi:

Código HTML:

<html>
<head>
<script LANGUAGE="javascript">
function cambia(capa){
//supongo que le envias la capa por que habran muchas... sino seria en vano??
if(document.getElementById("estado").value==0){
document.getElementById("link").innerHTML="Mostrar Opciones Avanzadas";
document.getElementById(capa).style.visibility = "hidden";
document.getElementById("estado").value=1;
}else{
document.getElementById("link").innerHTML="Ocultar Opciones Avanzadas";
document.getElementById(capa).style.visibility = "visible";
document.getElementById("estado").value=1;
}
</script>
</head>
<body>
<input type="hidden" name="estado" id="estado" value="0" />
<a href="#" onclick="cambia('capa1')"><span id="link">Ocultar opciones avanzadas</span></a>
<br>
<div id="capa1" style='position:relative;'>
<table width='100%'>
<tr>
<td bgcolor='black' align='center'>HOLA</td>
</tr>
</table>
</div>
</body>
</html>

tbass · #3 (**permalink**) 15/12/2008, 10:00

Cita:

Iniciado por masterojitos

mas practico seria asi:

Código HTML:

<html>
<head>
<script LANGUAGE="javascript">
function cambia(capa){
//supongo que le envias la capa por que habran muchas... sino seria en vano??
if(document.getElementById("estado").value==0){
document.getElementById("link").innerHTML="Mostrar Opciones Avanzadas";
document.getElementById(capa).style.visibility = "hidden";
document.getElementById("estado").value=1;
}else{
document.getElementById("link").innerHTML="Ocultar Opciones Avanzadas";
document.getElementById(capa).style.visibility = "visible";
document.getElementById("estado").value=1;
}
</script>
</head>
<body>
<input type="hidden" name="estado" id="estado" value="0" />
<a href="#" onclick="cambia('capa1')"><span id="link">Ocultar opciones avanzadas</span></a>
<br>
<div id="capa1" style='position:relative;'>
<table width='100%'>
<tr>
<td bgcolor='black' align='center'>HOLA</td>
</tr>
</table>
</div>
</body>
</html>

Muchísimas gracias por tu respuesta; en realidad es mucho mejor así. He hecho unos cambios al código porque quería que al principio salga solo "Mostrar".
También ha habido un problema con el else, que al establecer la variable seguía el código pero lo he solucionado leyendo antes el campo hidden.

Código HTML:

<html>
<head>
<script LANGUAGE="javascript">
function cambia(capa){
var estado = document.getElementById("estado").value;
  if(estado==0){
   document.getElementById(capa).style.visibility = "visible";
   document.getElementById("link").innerHTML="Ocultar opciones avanzadas";  
   document.getElementById("estado").value=1;  
  }else{ 
   document.getElementById(capa).style.visibility = "hidden";
   document.getElementById("link").innerHTML="Mostrar opciones avanzadas";
   document.getElementById("estado").value=0;  
  }
}
</script>
</head>
<body>
<input type="hidden" name="estado" id="estado" value="0">
<a href="#" onclick="cambia('capa1')"><span id="link">Mostrar opciones avanzadas</span></a>
<br>
<div id="capa1" style='position:relative;'>
<table width='100%'>
<tr>
<td bgcolor='black' align='center'>HOLA</td>
</tr>
</table>
</div>
<script>document.getElementById('capa1').style.visibility = "hidden";</script>
</body>
</html>

Por cierto, si hay más de una capa por ocultar

Muchas gracias un saludo!

masterojitos · #4 (**permalink**) 15/12/2008, 10:15

de nada varon.... un gusto y cuando quieras....

Dios los Bendiga.