Mostrar y ocultar div con evento onclick css y javascript


Mostrar o ocultar un div o un texto con css

Para ocultar un div html la mejor forma es utilizar javascript para detectar el evento onclick y cuando capturemos el evento asociar a ese div un estilo css encargado de ocultar el div. Esto nos permite ocultar el div en php o cualquier otro lenguaje, ya que al usar css y javascript sobre el html no nos importa el lenguaje de servidor utiliza (php, java, etc) y funcionará con cualquiera.

Por ejemplo, para ocultar div en html5 podemos utilizar este mismo sistema. Definimos un estilo css con el atributo “display: none;” de este modo todos los div que tengan este estilo css no se mostrarán. Con javascript asociamos el evento onclick al div html. Cuando se realiza el evento onclick el estilo css ocultará el div. Para mostrar el div tenemos varias posibilidad. Podemos eliminar el estilo encargado de ocultar el div cuando el click se realice fuera, de este modo el div se volverá a mostrar.

Ocultar campo de texto con evento click y css

El truco consiste en ocultar el campo de texto mediante CSS y hacerlo visible únicamente cuando el usuario hace click en la casilla de verificación checkbox “Otro” (mediante JavaScript).

Para ocultarlo, lo encerramos dentro de un DIV con display:none (visibilidad oculta).

El código sería:


<div id="OtroTema" style="display:none;">
	<input type="text" name="temaotro">
</div>

Y luego en el evento OnClick del checkbox “Otro” (su name es “tema”) debemos llamar a la función Javascript que se ocupará de hacer visible el campo. En el ejemplo, la función se llama: “ActivarCampoOtroTema”:

<input onclick="ActivarCampoOtroTema();" type="checkbox" name="tema[]" />

La función Javascript debe estar incluida dentro las etiquetas HEAD de tu código html. Su trabajo es identificar el DIV que contiene el campo oculto mediante getElementById y luego hacerlo visible mediante style.display = “block”;.

El código completo de la función Javascript sería:

<script type="text/javascript">
	function ActivarCampoOtroTema(){
		var contenedor = document.getElementById("OtroTema");
		contenedor.style.display = "block";
		return true;
	}
</script>

Ocultar o mostrar información de formulario en html

Éste truco es especialmente útil cuando necesitamos solicitar información específica únicamente a aquellos usuarios que hayan seleccionado una opción determinada. De este modo podemos ocultar o mostrar el div html con javascript solamente al usuario que queramos. Al resto de los usuarios no los interrumpimos con información innecesaria, significando ahorro de tiempo y mejor usabilidad del sistema.

Si deseas profundizar un poco más en el ejemplo de la encuesta, aquí tienes instrucciones de como saber las opciones seleccionadas por el usuario en los checkbox y cómo tomar sus valores.


Nota del autor: Busco programadores y diseñadores freelance para colaborarme con proyectos. Mostrame tus trabajos desarrollados, escribime!


Te agradaría derivar tu proyecto a un programador con años de experiencia?

Ing. Diego Angelini.
Autor de BlogdePHP.com
Programador Web Freelance






Porfolio de proyectos