Mostrar u ocultar elementos html con Javascript
Problema:
Como se puede mostrar y ocultar elementos de la página html a voluntad.
A veces queremos que una parte de la página pueda permanecer oculta a la vista del visitante, y que sólo se muestre bajo determinadas condiciones, algo así como ocurre con el atributo alt de las imágenes insertadas en las páginas web.
Por ejemplo: mostrar u ocultar un div con texto explicativo cuando el ratón pase por un enlace.
Solución
Aplicar un estilo al elemento mediante style.
Los elementos html en la página web poseen un atributo style que permite aplicarle estilos CSS en linea, como visibility para ponerlo visible (visible) o invisible (hidden). Esta propiedad muestra u oculta el elemento web, pero el espacio ocupado por el elemento permanece en la página a diferencia del display hidden.
Para cambiar de uno a otro estado (visible a invisible) basta con modificar el valor de esta propiedad en el atributo style. En este ejemplo se muestra u oculta un bloque div
Ejemplo
Como ejemplo para aclarar el uso de este mecanismo de ocultación usamos una página con un enlace tal que al pasar el ratón por encima muestre una etiqueta explicativa, que quedará oculta al retirar el ratón. La etiqueta está en un bloque div
Primero colocamos el bloque y el enlace en la página:
<div id="etiqueta" style="visibility: hidden"> Explicación aclaratoria del enlace</div>
<a href="example.com" onmouseover="visible()" onmouseout="oculto()"> Enlace muestra</>
Observa que el bloque lleva un atributo id para identificarlo dentro de la página. La propiedad style.visibility está puesta en hidden.
Ahora colocamos el enlace al que se referirá el bloque anterior:
function visible(){
let div = document.getElementById("etiqueta");
div.style.visibility = 'visible'
}
function oculto(){
let dv = document.getElementById("etiqueta");
div.style.visibility = 'hidden';
}
En el ejemplo has ocultado y mostrado el div con style, pero puedes ocultar con CSS: defines un estilo que además de visibillity defina otras propiedades para darle el formato que prefieras al bloque, sólo cambiará el código HTML de este elemento, los eventos permanecen igual. Solo que en lugar de cambiar style cambiaría un atributo class para alternar entre un class para visible y otro para invisible, por ejemplo.