• #Aplicaciones
  • #Bases de datos
  • #Dispositivos
  • #Hardware
  • #Inversión
  • #Marketing
  • #Programacion
  • #Sistemas
  • Cómo Mostrar u Ocultar Elementos HTML

    TutorialeshtmlProgramacion

    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");

    Deja una respuesta

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

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

    https://twitter.com/neeonez