Mostrar y ocultar elementos de la página con JQuery

Para aprender rápidamente como hacer cosas típicas con JQuery, explicaremos como mostrar u ocultar elementos de la página, cambiando propiedades de las hojas de estilo en cascada. Realizaremos un ejemplo de formulario donde algunos de los elementos están escondidos. En este formulario, al marcar una opción de un campo checkbox, se mostrarán todos esos elementos escondidos, y al desmarcar esa opción, se ocultarán.

El método que se dispone en JQuery para alterar las hojas de estilo se denomina css(), y lo podemos invocar sobre elementos de la página, a los que queremos cambiar sus propiedades CSS. En principio, para mostrar u ocultar elementos, nos viene bien alterar el atributo display poniendo el valor none para que no aparezca, y block para que sí lo haga.

Mostra u ocultar una capa con JQuery

Lo primero que tendremos que tener es un elemento de la página que es el que queremos mostrar/ocultar.

<div id="mielemento">
// CONTENIDO
</div>

Para ocultar este elemento habría que invocar al método css() de la siguiente manera:

$("#mielemento").css("display","none");

Se accede al elemento con la función dólar ($) y el selector ("#mielemento"), después al método css() le pasamos el valor "display" y "none" y de esta manera alteramos la propiedad display con el valor none para ocultar el elemento.

Para mostrarlo haremos algo parecido, pero colocaremo el valor block a la propiedad display de la siguiente manera.

$("#mielemento").css("display","block");

Mostrar u ocultar elementos como respuesta a un evento

Ahora que ya sabemos como utilizar el atributo display, veamos como poner en marcha el código para que funcione en nuestro ejemplo. Comencemos a trabajar con el formulario que mencionábamos al principio del capítulo

<form>
Nombre: <input type="text" name="nombre" />
<br />
<input type="checkbox" name="mayor_edad" value="1" id="edad" />Soy mayor de edad
<br />
<div id="formulario_mayores" style="display:none;">
Dato para mayores de edad <input type="text" name="mayores_edad" />
</div>
</form>

Como podemos comprobar, se trata de un formulario normal, con una capa id="formulario_mayores" que será la que queramos ocultar o mostrar al marcar o desmarcar el input tipo checkbox, dicha capa permanecerá en principio oculta, para lo que hemos incluido a dicha capa un display="none", y el checkbox que será el que nos diga si dicha capa se muestra o no.

Ahora es el momento de decirle cuando debe o no ocultar la capa, para lo que utilizamos código JQuery de la siguiente manera

$(document).ready(function(){
$("#edad").click(function(){
// CÓDIGO CUANDO SE HAGA CLICK
});
});

Ahora incluímos las instrucciones que se deben ejecutar como respuesta a dicho evento click.

if($("#edad").attr("checked")){
$("#formulario_mayores).css("display","block");
}else{
$("#formulario_mayores").css("display","none");
}

Básicamente, lo que hacemos es comprobar el estado del atributo checked del elemento #edad. Esto se hace con el método attr() indicando como parámetro el valor del atributo HTML que queremos comprobar. Entonces, si está checked, se mostrará el elemento, y si no lo estaba, habrá que ocultarlo.

Código completo

A continuación se muestra el código completo

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script>
$(document).ready(function(){
$("#edad").click(function(evento){
if($("#edad").attr("checked")){
$("#formulariomayores").css("display","block");
}else{
$("#formulariomayores").css("display","none");
}
})
})
</script>
</head>
<body>
<form>
Nombre: <input type="text" name="nombre" />
<br/>
<inputtype="checkbox"name="mayor_edad"value="1"id="edad">Soy mayor de edad
<br/>
<divid="formulariomayores"style="display: none;">
Dato para mayores de edad <input type="text" name="mayores_edad" />
</div>
</form>
</body>
</html>