Comprobar si un elemento está visible o no con jQuery

Name: Comprobar si un elemento está visible o no con jQuery
Brand: Jose Aguilar
SKU: joseaguilarblog-2567
Availability: InStock
Rating: 5 (15 reviews)

En muchas ocasiones es imprescindible saber o comprobar en el lado cliente si un elemento o contenedor está visible o no.

Con jQuery podemos averiguarlo de forma muy sencilla. Simplemente tenemos que situar una condición comprobando si el elemento es «visible», está presente o a la vista o también podemos observar el estado «hidden».

En nuestro <body> podríamos tener un elemento o contenedor escondido de la siguiente forma:

<div id="content" style="display:none;">Element</div>

Ahora con jQuery podríamos por ejemplo añadir la funcionalidad de mostrarlo en caso de que esté oculto u ocultarlo en caso de que esté visible. Lo podemos hacer de la siguiente forma:

if ($('#content').is(':hidden'))
   $('#content').show();
else
   $('#content').hide();

En el fragmento de código anterior estamos mirando si el elemento con id=»content» está oculto o tiene la propiedad «hidden», lo mostraremos y en caso contrario lo ocultaremos. También podríamos hacer la misma comprobación de la siguiente forma:

if (!$('#content').is(':visible'))
   $('#content').show();
else   
   $('#content').hide();

En el fragmento de código anterior estamos mirando si el elemento con id=»content» no está visible, lo mostraremos y en caso contrario lo ocultaremos.

Si programamos un ejemplo más completo sobre esto, podríamos emplearlo al hacer click en un botón o link como mostramos a continuación:

<script type="text/javascript">
$(document).ready(function() {
    $('.button').click(function() {
        if ($('#content').is (':hidden'))
            $('#content').show();
        else
            $('#content').hide();
    });
});
</script>

En este caso, el documento o la página estará esperando a que sea pulsado un botón o link con class=»button» para que se ejecute el código que comprueba si el elemento con id=»content» está oculto o visible para mostrarlo u ocultarlo según convenga.

Autor

Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.

Te ha servido? Valora esta entrada!

(15 votos, promedio: 5 de 5)

Comparte en las redes sociales

¿Buscas trabajo de programador?

4 respuestas a “Comprobar si un elemento está visible o no con jQuery”

Colindres dice:

24/01/2020 a las 4:13

Justo por lo que me estaba partiendo la cabeza, Gracias

Responder
Mayra dice:

15/03/2017 a las 19:36

Funciono perfecto gracias.

Responder
Mario Aliaga dice:

25/10/2013 a las 23:00

Muchas gracias, funciono.

Responder
Daniel acosta dice:

17/10/2012 a las 22:52

Excelente lo que buscaba muchas gracias

Responder