JavaScript - Ver y ocultar contenido

   
Vista:

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:

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
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

Ver y ocultar contenido

Publicado por xve (1594 intervenciones) el 02/02/2012 21:08:21
Hola Ruben, creo que cambiando la función cambiarFila podrías conseguirlo así:
1
2
3
4
5
function cambiarFila(num) {
  dis= ver ? '' : 'none';
  document.getElementById('tabla').style.display=dis;
  ver=!ver;
}

Indicamos al identificador de toda la tabla que se oculte o muestre

Coméntanos, ok?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Ver y ocultar contenido

Publicado por ruben (2 intervenciones) el 03/02/2012 12:26:52
Hola de nuevo,

acabo de probarlo y funciona a la perfección con la tabla! En cuanto pueda lo intentare aplicar a la página web, ya te comentaré.

Muchas gracias.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

Ver y ocultar contenido

Publicado por xve (1594 intervenciones) el 02/02/2012 21:09:01
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar