Mostrar y ocultar elementos de la página con jQuery

  • Por
Con el método css() de jQuery podemos aplicar cualquier estilo css a elementos de la página. Veremos cómo aplicarlo para mostrar y ocultar elementos de la página.
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.

Para entender bien lo que deseamos hacer, podemos ver el ejercicio en marcha en una página aparte.

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

<form>
Nombre: <input type="text" name="nombre">
<br>
<input type="checkbox" name="mayor_edad" value="1" id="mayoria_edad"> Soy mayor de edad
<br>
<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").attr("checked")){
   $("#formulariomayores").css("display", "block");
}else{
   $("#formulariomayores").css("display", "none");
}

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

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

<html>
<head>
   <title>Mostrar Ocultar</title>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>   
<script>
$(document).ready(function(){
   $("#mayoria_edad").click(function(evento){
      if ($("#mayoria_edad").attr("checked")){
         $("#formulariomayores").css("display", "block");
      }else{
         $("#formulariomayores").css("display", "none");
      }
   });
});
</script>
</head>

<body>

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

</body>
</html>

Finalmente, podemos verlo en marcha en una página aparte.

Autor

Miguel Angel Álvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

elandy2009

28/8/2009
hola
Algo así como un efecto toggle

Fernando

04/8/2010
Felicitaciones
estimado, te quiero felicitar por lo bien que lo explicas, me ha sido de gran ayuda.

lillo78

05/12/2010
mostrar ocultar capas
Hola, estoy diseñando una web en la que tengo cuatro botones para cuatro capas diferentes. Una de esas capas quiero que este siempre visible al cargar la pagina, y las otras tres ocultas (hasta aquí todo ok, simplemente asignando 'visibility' o 'display' a las capas en cuestion) Lo que quiero conseguir es alternar la visibilidad de las capas al pulsar sus botones correspondientes, así cuando pulse el boton dos aparecera la capa2 y se ocultara la capa visible por defecto, y cuando pulse el boton 4 se oculte la capa visible en ese momento y se vea la capa 4 (por ejemplo). Si alguien me pudiera ayudar, le estaria muy agradecido.

Txema

10/5/2011
corrección de código
Ante todo gracias por los tutoriales

Estoy repasando y haciendo las prácticas que se muestran. Ya en la versión jquery 1.6
En Firefox 4.0.1 el código
if ($("#mayoria_edad").attr("checked"))
no me está funcionando. Si con la corrección
if ($("#mayoria_edad").attr("checked", true))

Gracias nuevamente

Roberto

20/4/2012
Duda
hola buenas, estoy aprendiendo jquery y vieras que del tuto anterior y este hice las mismas practicas que vos, y no me funcionan para nada y he revisado varias veces el codigo y a un asi no le encuentro el errror. De todas maneras muchas gracias por el tutorial

Eloy Monter

05/7/2012
Selectores de clase
Hola, éste tutorial me ha funcionado a la perfección. Ahora solo tengo una duda, estoy trabajando en un formulario que tiene 15 campos checkbox, en el ejemplo usamos un selector de id que funciona para un id único, lo cambié con un selector de clase, es decir, cambié el #mielemento por .mielemento para usar un solo atributo class en todos los checkbox, pero no me funciona, qué puedo hacer en éste caso?

eduardobape

17/1/2013
Corrección del ejemplo de uso de attr() y checked de un checkbox
A partir de JQuery 1.6, el método attr() devuelve undefined si se le pasa como parámetro un nombre de atributo que no estaba establecido inicialmente.
En el caso del ejemplo de este tutorial, $("#mayoria_edad").attr("checked") devolver undefined ya que el checkbox no tiene establecido inicialmente el atributo checked.

La solución correcta a este ejemplo es la siguiente:

$(document).ready(function(){
$('#mayoria_edad').click(function(evento){
if($("#mayoria_edad").prop("checked")) {
$("#formulariomayores").css("display", "block");
}
else {
$("#formulariomayores").css("display", "none");
}
});
});

Leed la documentación de JQuery de los métodos attr() y prop(), o buscad en un buscador información acerca del uso de attr() con checked para comprender todo esto mejor.

ilean

27/1/2013
código obsoleto
Desde la versión 1.6, debe usarse la función prop() en vez de attr() para modificar (lo que ahora ellos llaman) propiedades del DOM

http://api.jquery.com/attr/

As of jQuery 1.6, the .attr() method returns undefined for attributes that have not been set. In addition, .attr() should not be used on plain objects, arrays, the window, or the document. To retrieve and change DOM properties, use the .prop()method.

Vaya gracia, eh?

Un saludo!

AbrahamFX

08/3/2013
Gracias :)
gracias por publicar las correccciones, estaba mirando el codigo un buen tiempo, por q no me funcionaba ^^

eloy_quispe

10/12/2013
Agradecido
Solo manifestar que estoy muy agradecido por este excelente tutorial

RubensRFS

08/1/2014
Compatibilidad con versiones actualizadas
Muy bueno el tutorial, solo tengo una duda, estoy realizando la prueba con la version 2.0.3 y hay ejercicios que no funcionan, tengo que correr los ejercicios con la version del manual, mi duda es si se contempla la compatibilidad con versiones nuevas...!!!

Julian

07/2/2014
Comprobación Checked
Genial todos los manuales....

En este, cabe comentar que al probarlo con las versiones 1.10 y superiores, esta orden no funciona correctamente
if ($("#mayoria_edad").attr("checked"))

También he probado la que sugería Txema un poco más arriba pero sólo me lo mostraba y no me lo ocultaba
if ($("#mayoria_edad").attr("checked", true))

Esta que os coloco a continuación funciona perfectamente
if($("#mayoria_edad").is(":checked"))

Saludos,

claudio_gonzlez_soto

30/4/2014
Problema con jquery 1.11.0
Hola que tal.

estoy siguiendo el manual de JQuery y lo encuentro fabuloso y a su vez comentar que me he encontrado con el siguiente inconveniente:
Baje la ultima versión jquery-1.11.0.js, resultado que en el capitulo 5 Mostrar y Ocultar Elementos de la página con JQuery; no funciona mostrar, despues de seleccionar el checkbox, ahora si pongo la versión jquery-1.3.2.min.js si funciona.

La pregunta es, ¿Hay que efectuar algún cambio en $(document).ready(function(), para que funcioné con cualquier versión de jquery?

Un Cordial saludo

saldahna

10/5/2014
Gran ayuda
muy buen aporte, me ha sido de gran ayuda.

Julio

02/8/2014
event o evento
En otros ejemplos se uso puso "event" y en este "evento"
Que es lo correcto: event o evento?
Gracias.

Will

03/10/2014
Wow
Muchas gracias, me sirvió mucho

Elisabeth

24/10/2014
Formulario
Hola, tengo un formulario en php. Mi documento a gestionar es un carrito. Dispongo de dos documentos. Uno el carrito y otro el checkout.
Mi pregunta es que no quiero que salga la parte de cálculos hasta que se introduzca el código postal. En el carrito a la izquierda sale meter tu ciudad y código postal y según que ciudad el precio del producto varía. La cuestión es que pueden acceder al proceso de compra sin poner el código postal, por lo tanto la tasa de impuesto no es la correcta. Como podría hacer para ocultar la parte de la derecha, la de los cálculos y precios, hasta que no introduzca el código postal. La parte del formulario está en un documento y la parte de los cálculos en otro

David Reyes

18/11/2014
MUy bonito
Gracias por compartir, es bueno tener estos apuntes bajo la manga !!!!

Alex

17/12/2014
Ayuda
Alguien que pudiese subir el código con las correcciones de Jquery, las sugerencias que dan no me han funcionado