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.