Ver y ocultar contenido
Publicado por ruben (2 intervenciones) el 02/02/2012 20:17:48
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 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:
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.
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 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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!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.
Valora esta pregunta
0
