Cómo Mostrar u Ocultar Elementos HTML

html

En HTML podemos mostrar u ocultar elementos de diversas formas. Podemos usar el atributo hidden de HTML o también podemos usar las propiedades CSS display o visibility, que esconderán o mostrarán elementos en función de su valor.

Atributo Hidden de HTML

Los elementos HTML son visibles por defecto salvo que el atributo hidden esté presente en una etiqueta, en cuyo caso se ocultará en el documento:

<div hidden></div>

Puedes consultar más detalles acerca el atributo hidden aquí.

Propiedad Display de CSS

Otro método mediante el cual podemos mostrar u ocultar elementos de un documentos HTML consiste en dar el valor none a la propiedad CSS display, que esconderá el elemento en el documento, aunque siga presente en el DOM, tal y como vemos en este ejemplo:

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

Si la propiedad display tiene cualquier otro valor, como por ejemplo inline, block, inline-block, flex, grid o table, entre otros, el elemento se mostrará.

Resulta muy habitual mostrar u ocultar elementos dinámicamente mediante JavaScript.

Si por ejemplo queremos mostrar el div anterior mediante JavaScript:

document.getElementById("element").style.display = "block";

En caso de querer ocultarlo mediante JavaScript:

document.getElementById("element").style.display = "none";

Si usas jQuery, también puedes usar el método hide() para ocultar un elemento o el método show() para mostrarlo.

Por ejemplo si quieres mostrar el div anterior usando jQuery:

$('#elemento').hide()

En caso de querer ocultarlo:

$('#elemento').show()

Propiedad Visibility de CSS

Finalmente, también es posible ocultar o mostrar elementos HTML mediante la propiedad CSS visibility. A diferencia de la propiedad display, cuando ocultamos elementos mediante la propiedad visibility, el espacio que ocupaban se mantendrá en el documento.

Para ocultar un elemento HTML usando la propiedad visibility, debemos establecer su valor como hidden o como collapse:

<div id="elemento" style="visibility:hidden;"></div>

Si queremos ocultar el div anterior, podemos modificar la propiedad visibility mediante JavaScript:

document.getElementById("element").style.visibility = 'hidden';

En caso de querer mostrarlo usando JavaScript:

document.getElementById("element").style.visibility = 'visible';

En este, caso, jQuery no dispone de métodos específicos para modificar la propiedad visibility, por lo que tendrás que modificar su valor tal y como lo harías para cualquier otra propiedad CSS. Por ejemplo, para hacer visible el div de nuestro ejemplo mediante jQuery:

$('#elemento').css("visibility", "visible");

Si por el contrario quieres ocultar el div de nuestro ejemplo mediante jQuery:

$('#elemento').css("visibility", "hidden");

Avatar de Edu Lazaro

Edu Lázaro: Ingeniero técnico en informática, actualmente trabajo como desarrollador web y programador de videojuegos.

👋 Hola! Soy Edu, me encanta crear cosas y he redactado esta guía. Si te ha resultado útil, el mayor favor que me podrías hacer es el de compatirla en Twitter 😊

Si quieres conocer mis proyectos, sígueme en Twitter.

8 comentarios en “Cómo Mostrar u Ocultar Elementos HTML

  1. hola Edu, soy Luis, estoy programando hace muy poco tiempo una macro en e con código en módulo visual basic, con la que manejo una pagina web, utilizando IE, no se si tendrás el tiempo y conocimiento, como para ayudarme.

    pero estoy desesperado y por mas que busco propiedades, métodos e instrucciones en internet, no logro resolver mi problema.

    el tema es que necesito recorrer los elementos (div) de una pagina web, para lograr hacer click, en un item, dentro de un combobox.

    la forma con la que logro hacerlo, en estado paso a paso de depuración es la siguiente:

    Dim HTMLDoc As HTMLDocument
    Dim oHTML_Element As Object

    Set HTMLDoc = ie.document
    Set oHTML_Element = ie.document.getElementsByTagName(«class»)

    Dim itemEle As Object

    For Each oHTML_Element In HTMLDoc.getElementsByTagName(«div»)
    If oHTML_Element.getAttribute(«class») = «dijitReset dijitMenuItem» Then
    If oHTML_Element.getAttribute(«item») = 1 Then
    oHTML_Element.Click
    Exit For
    End If
    End If
    Next

    – dijitPopup dijitComboBoxMenuPopup ***Nombre del menú desplegable del combobox cuyo código esta oculto y que contiene el div y la clase dijitReset dijitMenuItem que necesito***

    – (1) ***numero de índice del item que quiero seleccionar***

    como comente, de esa forma logro llegar al item que necesito y hacer click automático, pero eso, solo si intervengo haciendo click directamente sobre la flecha ▼ del combobox, porque descubrí, que el elemento div y la class (dijitPopup dijitComboBoxMenuPopup) no se muestran en el código HTML hasta que no se haga click en algún item del combobox.

    hay alguna forma de recorrer los elementos que no están visibles dentro del código html o de hacer visible el código con alguna instrucción como por ejemplo:

    las cuales en realidad no me funcionan :(

    ie.document.getElementsByClassName(«dijitReset dijitMenu dijitComboBoxMenu»)(0).getAttribute(«visibility») = Visible

    o

    ie.document.getElementById(«dijitReset dijitMenu dijitComboBoxMenu»)(0).getAttribute(«visibility») = Visible

    quedo atento a tus comentarios, de antemano gracias Edu

    1. Sería un poco complicado obtener su consulta solo con JavaScript, te recomendaría que uses jQuery, que a diferencia de la primera te permite iterar con cada elemento dentro de otro elemento de manera más intuitiva.

  2. Necesitaba esta información en jQuery para pasar un módulo de mi curso, así que infinitamente agradecido con la información.

  3. Muchas gracias, tenía un día entero luchando para poder encontrar una solución pero gracias a tu contenido pude resolverlo fácilmente, excelente trabajo!!

Deja una respuesta

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

“- Hey, Doc. No tenemos suficiente carretera para ir a 140/h km. - ¿Carretera? A donde vamos, no necesitaremos carreteras.”