Ocultar varios Divs

  • 0
¿Como hacemos esto?  Primero creamos el formulario...
<form>
<label for="nombre">Nombre</label>
<input name="nombre" type="text" id="nombre" style="margin-bottom:4px" />
<br />

><label for="apellido">Apellido</label>
<input name="apellido" type="text" id="apellido" />
<br />

<p>
<label for="sexo">Sexo</label>
<input name="sexo" id="sexo"type="radio" value="m" checked="checked" onclick="toggle_apellido_soltera(this)" />Masculino
<input name="sexo" id="sexo" type="radio" value="f" onclick="toggle_apellido_soltera(this)" />Femenino
<br />
</p>

<div id="div_apellido_soltera" style="display:none">
<label for="apellido_soltera">Apellido Soltera</label>
<input name="apellido_soltera" type="text" id="apellido_soltera" />
<br />
</div>
</form>

En el código anterior debemos destacar el atributo onclick de los radio buttons (input radio) que indican el sexo...

onclick="toggle_apellido_soltera(this)"

Lo que hace este atributo es llamar a la función toggle_apellido_soltera() pasándole como parámetro el objeto radio que fue clickeado ("this"), la función toggle_apellido_soltera() es la encargada de mostrar / ocultar el DIV que contiene el campo "Apellido Soltera" , veamos el código de dicha función...

<script>
<!--

function toggle_apellido_soltera(elemento) {

  if(elemento.value=="m") {
      document.getElementById("div_apellido_soltera").style.display = "none";
   } else {
     document.getElementById("div_apellido_soltera").style.display = "block";
   }

}

-->
</script>

Básicamente lo que hace esta función es chequear con un IF el valor del ratio "clickeado" si es "m" (masculino) oculta el DIV...

document.getElementById("div_apellido_soltera").style.display = "none";

De lo contrario lo muestra...

document.getElementById("div_apellido_soltera").style.display = "block";

Aclaremos que el bloque de contenido que queres mostrar / ocultar esta contenido dentro de un DIV ("div_apellido_soltera") que por defecto aparece oculto...

style="display:none"

Segundo Caso:  Mostrar u ocultar un DIV según el ítem elegido en un select

Veamos el codigo para armar el formulario...

<form>
<label for="ocupacion">Ocupacion</label>
<select id="ocupacion" name="ocupacion" onchange="toggle_ocupacion(this)">
   <option value="1">Analista de sistemas</option>
   <option value="2">Programador</option>
   <option value="0">Otra</option>
</select>
<span id="span_otra_ocupacion" style="display:none">
<label for="cual">Cual?</label><input name="cual" type="text" id="cual" />
</span>
</form>

En este caso llamamos a la función que hace el toggle (mostrar / ocultar) en el atributo onchange de elemento ocupación, veamos esta función...

function toggle_ocupacion(elemento) {

if(elemento.value==0) {
   document.getElementById("span_otra_ocupacion").style.display = "inline";
} else {
   document.getElementById("span_otra_ocupacion").style.display = "none";
}

}

 

El IF evalúa que elemento seleccionado sea el 0 ("Otro")...

elemento.value==0

Si esta condición se cumple se muestra el bloque que contiene el campo para ingresar la otra profesión...

document.getElementById("span_otra_ocupacion").style.display = "inline";

De lo contrario se oculta.

 

Ver ejemplos y fuente: Clic aqui

No hay comentarios: