ocultar y desocultar elementos

[virla]

quiero hacer algo similar a lo que tiene en la pagina principal de los forosdelweb que tiene un boton donde oculta o desoculta las filas de las diferentes secciones del foro. alguien me puede pasar un codigo o decirme en donde puedo conseguir algo asi o como se llama a esta funcion para buscarla.
Tambien lo tiene la parte de respuestas rapidas en la esquina derecha un boton con flechita para arriba y cuando la presionas cambia la imagen a una flecha para abajo y se contrae u oculta esa fila
desde ya muchas gracias

[flaviovich]

Hola virla!
Si no me equivoco, para mostrar/ocultar elementos usan capas. Aunque tambien depende de lo que quieras ocultar.
Digamos que sea una fila en una tabla. Para ocultarla seria asi:
<tr style="visibility:hidden"></tr>
Y para mostrarla:
<tr style="visibility:visible"></tr>
Bueno, esto es lo poco que sé sobre esto. Seguramente, alguien dara una mejor idea.
suerte

[Saruman]

esto bien básico:

Código HTML:

<script>
function Toggle(tabla) {
  tabla = document.getElementById(tabla);
  var label = document.getElementById("label_button");
  
  if (tabla.style.display == "none") {
   tabla.style.display = "block";
   label.innerText = "[Cerrar]";
  } else {
   tabla.style.display = "none";
   label.innerText = "[Abrir]";
  }
 }
</script> 

Código HTML:

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>Titulo de la Tabla</td>
    <td><a href="javascript:void(0);" onClick="Toggle('mi_tabla')"><span id="label_button">[Cerrar]</span></a></td>
  </tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border:1px solid #000000;" id="mi_tabla">
  <tr>
    <td>&nbsp;</td>
  </tr>
</table> 

saludos

[virla]

lo prove y funciona muy bien y es eso lo que quisiera, pero como hago para que en vez de que sea la palabra cerrar o abrir sean imagenes, sori pero de javascript no se nada

[Saruman]

con gusto:

Código HTML:

function Toggle(tabla) {
  tabla = document.getElementById(tabla);
  var img = document.getElementById("img_button");
  
  if (tabla.style.display == "none") {
   tabla.style.display = "block";
   img.src = "dir/cerrar.gif";
  } else {
   tabla.style.display = "none";
   img.src = "dir/abrir.gif";
  }
 }

Código HTML:

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>Titulo de la Tabla</td>
    <td><a href="javascript:void(0);" onClick="Toggle('mi_tabla')"><img id="img_button" src="cerrar.gif" border="0"></a></td>
  </tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border:1px solid #000000;" id="mi_tabla">
  <tr>
    <td>&nbsp;</td>
  </tr>
</table> 

[virla]

ok, muchas gracias muchachos por la ayuda, se agradece de todo corazon

[virla]

hay solo un error no me cambia la imagen solo desaparece que puede ser?, otra cosa que veo es, tengo varios togles pero al precionar sobre cualquiera de ellos que no sea el primero cambia la imagen del primero y no del que estoy precionando, en realidad no cambia la imagen solo deja vacio, que puede ser esto?
otra cosita, si quiero que al abrir la pagina aparezcan algunos de ellos ocultos, que deveria hacer?

[Saruman]

la ruta de la imagen no está bien, la extensión, el nombre, etc.

[virla]

bueno lo de la imagen funciona bien, pero sigo con los otros problemas que al hacer clik en otros que no sean el primero, ma cambia la imagen del primero y no del que estoy haciendo click y el tema de que algunos queden ocultos y otros visibles

[Saruman]

ok, ya veo. para ello tiene que poner a cada uno un id diferente, eso seria a la imagen y a la tabla. asi:

Código HTML:

function Toggle(tabla) {
  tabla = document.getElementById(tabla);
  var img = document.getElementById("img_" + tabla);
  
  if (tabla.style.display == "none") {
   tabla.style.display = "block";
   img.src = "dir/cerrar.gif";
  } else {
   tabla.style.display = "none";
   img.src = "dir/abrir.gif";
  }
 }

Código HTML:

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>Titulo de la Tabla</td>
    <td><a href="javascript:void(0);" onClick="Toggle('mi_tabla1')"><img id="img_mi_tabla1" src="cerrar.gif" border="0"></a></td>
  </tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border:1px solid #000000;" id="mi_tabla1">
  <tr>
    <td>&nbsp;</td>
  </tr>
</table> 

Código HTML:

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>Titulo de la Tabla</td>
    <td><a href="javascript:void(0);" onClick="Toggle('mi_tabla2')"><img id="img_mi_tabla2" src="cerrar.gif" border="0"></a></td>
  </tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border:1px solid #000000;" id="mi_tabla2">
  <tr>
    <td>&nbsp;</td>
  </tr>
</table> 

asi sucesivamente...

[virla]

me sale este error 'null' es nulo o no es un objeto y la linea que me marca es esta

img.src = "/Img/textos/BotonOculta.gif";

mis tablas las llamo asi
onClick="Toggle('NotLocales')
wl id de la imagen le pongo
id="img_NotLocales"

creo que es asi como tiene que ser segun interpreto el ejemplo que me pusistes

[Saruman]

listo, modifica estas dos lineas:

Código HTML:

var img = document.getElementById("img_" + tabla);
tabla = document.getElementById(tabla);

saludos

[davidcelta]

Ese código que habeis puesto me viene de perlas, muchas gracias. Solo tengo una duda:
¿Que he de hacer para que la tabla este oculta por defecto al abir la pagina web?

[virla]

la verdad yo tambien queria eso, pero el amigo Saruman ya me ha ayudado demaciado, espero que alguno de los demas expertos puedan darnos una mano con esto ultimo
gracias Saruman por tu ayuda

[flaviovich]

Hola virla y davidcelta!
Lo que necesitais es poner:

Código HTML:

<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border:1px solid #000000; visibility:hidden;" id="mi_tabla2">
  <tr>
    <td>&nbsp;</td>
  </tr>
</table> 

Amigo Saruman, me parece que seria mejor usar visibility, ya es especifico para lo que vosotros quereis. Desde luego display, permite hacer lo mismo, pero no es su objetivo.
Yo no soy experto, pero me parece que asi es mejor. Bienvenidas las criticas!
suerte a todos

[Saruman]

Iniciado por flaviovich

Amigo Saruman, me parece que seria mejor usar visibility, ya es especifico para lo que vosotros quereis. Desde luego display, permite hacer lo mismo, pero no es su objetivo.

bueno, yo siempre he usado display..... y en la mayoria de los scripts siempre he visto más display que visibility... por tal razón fué que lo usé y sigo utilizando...
críticas aceptadas

finalmente quedaría asi:

Código HTML:

<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border:1px solid #000000;" id="mi_tabla2" style="display:none;">
  <tr>
    <td>&nbsp;</td>
  </tr>
</table> 

ya que si no le ponemos el "display" en la función no lo reconocerá la primera vez que se "cliké"
saludos a todos

[virla]

Mil gracias por toda tu ayuda Saruman y demas ahora creo que muchos otros mas podran veneficiarce de este codigo que han dejado
mil gracias de nuevo.
trabajo terminado, para mi

[davidcelta]

Muchas gracias a los dos y a Virla por adelantarse al abrir el tema (yo ya me he beneficiado del código como dices y seguro que no seré el último)

Es interesante tener las dos versiones.
Visibilty guarda el espacio asignado al elemento aun cuando no lo muestra (hidden), mientras que Display "despliega" su contenido al mostrarse.

Salud!

[Fleiva]

Interesante el efectillo, muchas gracias, andaba buscandolo.

[andrea_10]

Hola... como puedo hacer que se oculte un label y un textbox al seleccionar una opcion especifica de un dropdownlist. Es decir si selecciono uno de las opciones que tienen mi drop se me oculta el textbox y el label y su vuelvo a selecionar la misma opcion de mi drop se me aparezca el label y texboxt.