> Manuales > Manual de jQuery

Cómo mostrar y ocultar elementos de la página con el método css() de jQuery. Ejemplo en un formulario donde se muestran más campos cuando un checkbox ha sido chequeado.

Mostrar y ocultar elementos de la página con jQuery

Para aprender rápidamente cómo hacer cosas típicas con jQuery, vamos a explicar cómo mostrar u ocultar elementos de la página, cambiando propiedades de las hojas de estilo en cascada. Para que este artículo tenga un poco más de practicidad, vamos a realizar un ejemplo de formulario donde algunos de los elementos están escondidos. En ese formulario, al marcar una opción de un campo checkbox, se mostrarán 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 llama css() y lo podemos invocar sobre elementos de la página, a los que queremos cambiar sus propiedades CSS. En principio, para mostrar y ocultar elementos, nos viene bien alterar el atributo "display", poniendo el valor "none" para que no aparezca y "block" para que sí lo haga.

Lo que deberíamos saber para poder entender este ejemplo se puede aprender en el Manual de jQuery que venimos publicando en DesarrolloWeb.com. Aunque como este es un ejemplo básico, será suficiente con estudiar el artículo Pasos fundamentales para usar jQuery.

Ocultar y mostrar una capa con jQuery

Vamos a ver brevemente cómo usar el mencionado método css(). Primero, tendríamos que tener un elemento en la página, que es el que vamos a mostrar u ocultar.

<div id="mielemento">
    Contenido del elemento...
</div>

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

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

Como se puede ver, se accede al elemento con la función dólar $() y el selector "#mielemento". Luego al método css() le pasamos el valor "display" y "none", porque queremos alterar a propiedad display y asignarle el valor "none", para ocultar el elemento.

Para mostrarlo haríamos algo parecido, pero colocando el valor "block" en el atributo CSS "display".

$("#mielemento").css("display", "block");
Nota: el método css() admite otros parámetros. Si sólo recibe un parámetro, de tipo string, devuelve el valor CSS asignado a ese parámetro. También podría recibir un sólo parámetro, en este caso de con una notación de objeto con pares llave/valor, y entonces asignaría todos esos estilos CSS, especificados por los pares llave/valor en el objeto, al elemento de la página donde se haya invocado el método.

Mostrar u ocultar elementos como respuesta a un evento

Ahora que ya sabemos cómo realizar un cambio en el atributo display, vamos a ver cómo poner esta instrucción en marcha cuando el usuario realice acciones en la página. Recordar que al principio del artículo comentaba que íbamos a crear un formulario con una casilla de selección (campo checkbox) y que al activar ese campo se mostrarían otros contenidos en el formulario. Al desactivarlo, se ocultarían esos contenidos del formulario.

Lo primero que podemos presentar es el formulario con el que vamos a trabajar.

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

Como se podrá ver, es un formulario como otro cualquiera. Sólo que tiene una capa con id="formulariomayores", que contiene los elementos del formulario que queremos mostrar u ocultar al marcar o desmarcar el checkbox. Esa capa estará inicialmente oculta, y para ello hemos colocado el atributo style="display: none;". Podemos fijarnos también en el checkbox con id="mayoria_edad", que es el que va servir para marcar si se desea o no ver la parte final del formulario.

Ahora hay que hacer cosas cuando se haga clic en el checkbox con id="mayoria_edad". Para ello en deberíamos crear un código Javascript y jQuery como este:

$(document).ready(function(){
   $("#mayoria_edad").click(function(){
      //lo que se desee hacer al recibir un clic el checkbox
   });
});

Como ya hemos comentado, estas líneas sirven para especificar eventos. $(document).ready() se hace para lanzar instrucciones cuando el navegador está preparado para recibirlas y $("#mayoria_edad").click() sirve para realizar acciones cuando se ha hecho clic sobre el elemento con id "mayoria_edad", que es el checkbox del formulario.

Lee el artículo Pasos para trabajar con jQuery para más información sobre este punto).

Ahora tenemos que ver las instrucciones que debemos ejecutar como respuesta a ese evento.

if ($("#mayoria_edad").prop("checked")) {
  $("#formulariomayores").css("display", "block");
} else {
  $("#formulariomayores").css("display", "none");
}

Básicamente lo que hacemos es comprobar el estado de la propiedad "checked" del elemento "#mayoria_edad". Esto se hace con el método prop() indicando como parámetro el valor de la propiedad del elemento del DOM que queremos comprobar. Entonces, si estaba "checked", se tiene que mostrar el elemento y si no estaba marcado el checkbox, habría que ocultarlo.

Existe en jQuery un método similar a prop() que es attr(). Una duda frecuente con jQuery es cuándo usar uno u otro. En resumen, attr() lo usamos cuando queremos acceder a los valores de los atributos HTML y prop() se usa cuando queremos acceder a las propiedades de objetos del DOM del navegador. De todos modos, la diferencia entre atributos y propiedades puede ser un poco confusa, por lo que, si quieres más información te recomendamos que consultes este artículo para conocer las diferencias entre propiedades y atributos y sus matices.

Espero que se haya entendido bien. Ahora dejo aquí el código completo de este ejemplo:

<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

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

  <script src="../js/jquery-3.6.3.js"></script>
  <script>
    $(document).ready(function () {
      $("#mayoria_edad").click(function (evento) {
        console.log(evento, $("#mayoria_edad").prop("checked"));
        if ($("#mayoria_edad").prop("checked")) {
          $("#formulariomayores").css("display", "block");
        } else {
          $("#formulariomayores").css("display", "none");
        }
      });
    });
  </script>
</body>

</html>

Espero que el ejemplo haya sido útil y representativo de lo que se puede hacer fácilmente con jQuery.

Miguel Angel Alvarez

Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...

Manual