Ver y ocultar contenido

kaotik90 · #1 (**permalink**) 02/02/2012, 08:43

Hola,

primero de todo, quiero dejar claro que no tengo ninguna noción de Javascript, pero el caso es que me interesó la idea de mostrar y ocultar contenido, ya que estoy haciendo una pagina web (en php) y me interesaria que una serie de elementos estuvieran ocultos, y que al hacer click sobre uno general, aparecieran los demás.

Pues partí del código de JavierB de http://www.telefonica.net/web2/blas-mar/vertabla.html ya que creo que me servirá, y con un poco de ayuda lo dejé de la siguiente manera:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Mostrar/ocultar filas y columnas</title>
<style type="text/css">
table {border-collapse:collapse;border:5px solid blue;margin-left:40px}
td {border:2px solid maroon;width:40px;text-align:center}
input {background:cyan; border:2px solid red;width:200px;margin:5px}
</style>
<script type="text/javascript">

ver=false;

function cambiarFila(num) {
	
  dis= ver ? '' : 'none';
  tab=document.getElementById('tabla');
  tab.getElementsByTagName('tr')[num].style.display=dis;
  ver=!ver;
}

</script>
</head>
<body>
<table id="tabla" border="1">
<tr><input type="button" value="MOSTRAR/OCULTAR TABLA" onclick="cambiarFila(0)"/>
<td>1.1</td><td>1.2</td><td>1.3</td>
</tr>
<tr>
<td>2.1</td><td>2.2</td><td>2.3</td>
</tr>
<tr>
<td>3.1</td><td>3.2</td><td>3.3</td>
</tr>
</table>

</body>
</html>

De esta manera, me muestra/oculta una fila, la primera, pero lo que realmente me interesaría es, hacer que cuando haga click me muestre/oculte TODO el contenido.

De cara a la página web que estoy haciendo, en vez de mostrar una tabla, seria mostrar elementos <li> de una lista de elementos.

A ver si alguien me podria ayudar, se lo agradeceria!

Un saludo.

goteen_mx · #2 (**permalink**) 02/02/2012, 10:17

Puedes meter la tabla dentro de un Div, y aplicarle al div el estilo, por otro lado cuando muestras y ocultas filas de una tabla en IE, no persisten los estilos por lo que te aparece plano, para solucionarlo tienes que una vez dandole display='block' asignale la clase o los estilos nuevamente.

Saludos.