Mostrar y ocultar div con evento onclick javascript, html y css

Ocultar div html con css

La forma más sencilla de ocultar un div en HTML es añadir el atributo style al tag del div y en este atributo especificar la propiedad CSS display con valor “none”.

Ejemplo al ocultar un div en el tag HTML.

Tendríamos algo así:

<div style=”display: none;”>

Una práctica de programación HTML mejor es aplicar este estilo en una clase css. Por ejemplo:

<div class=”claseDiv”>

Y en el fichero CSS tendríamos el estilo dentro de la clase CSS:

.claseDiv{

display: none;

}

Esta sería la forma más correcta de ocultar un div html. En la mayoría de casos no queremos que el div esté oculto todo el rato, sino que queremos ocultar el div de forma dinámica. Para ello tendríamos que utilizar javascript para detectar el evento onclick y añadir o quitar la clase CSS que hemos implementado antes de forma dinámica en la función que capture el evento click.

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.

ocultar-div

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.

Hosting

Te recomendamos...

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *