NorfiPC
NorfiPC » Informaciones » Ocultar y mostrar elementos

Como ocultar y mostrar elementos en las páginas web usando Javascript

Insertar códigos para dar la opción al lector de ver o de ocultar partes, áreas, secciones y contenido de una página. Como usar botones, vínculos u otros eventos para decidir si se muestran u ocultan bloques de texto, imágenes, videos o cualquier otro elemento. Como usar la propiedad Style display. Ejemplos prácticos para copiar y pegar.
Como ocultar y mostrar elementos en las páginas web usando Javascript Uno de los tantos usos de Javascript, es el de poder ofrecerles la opción a nuestros lectores, de mostrar o de ocultar en su navegador determinadas secciones de una página.
Al ser un lenguaje interactivo podemos insertar distintos eventos como puede ser un botón, un bloque o un vínculo que funcionaran del lado del navegador después que la página cargue, sin que sea necesario volverla a cargar, incluso pueden funcionar offline.
En la práctica esta opción es muy utilizada en los sitios de internet más populares como Facebook o Google, pero cualquiera con conocimientos elementales puede habilitarla en su propia página o blog.



Ventajas y usos prácticos de ocultar secciones de una página


✓ Podemos ocultar los elementos secundarios, menos necesarios y hacer que sean mostrados a solicitud del lector.
✓ Ocultar elementos pesados de cargar como son imágenes grandes videos, etc. y mostrarlos solo a petición del lector.
✓ Hacer las páginas más reducidas relativamente, de forma que sea más rápido deslizarse con el navegador hasta el final.
✓ Dar la opción de ocultar secciones innecesarias para el lector.
✓ Dar la opción de mostrar información adicional, solo al que esté interesado en ellas.

Ejemplo de una sección oculta en una página web


La siguiente sección se encuentra oculta, para verla solo da un clic en el botón "Mostrar"



¿Cómo ocultar o mostrar una parte o área de una página?


Para ocultar o mostrar una sección se utiliza la propiedad Style display.
Puede ser usada mediante el estilo CSS o con Javascript.
Para definir si un elemento se muestra u oculta en una página, se pueden usar varias propiedades, las más empleadas son las siguientes:
style.display = 'none'
style.display = 'block'
style.display = 'inline' (predeterminada)
La primera de ellas lo oculta y las dos siguiente lo muestran ya sea en forma de bloque (ocupando una línea completa) o inline (permite contenido flotante a uno u otro lado).
Más información sobre todas las propiedades que admite Style display en W3School: Style display Property



Ejemplos prácticos


A continuación dos ejemplos prácticos:
El primero muestra los códigos necesarios para mostrar una sección de una página oculta de forma predeterminada.
El segundo permite ocultar a petición del usuario una sección.

Código para mostrar elementos ocultos


1- Ante todo debemos encerrar el contenido a ocultar dentro de un DIV o contenedor y darle un identificador único.
Por ejemplo:
<div id='oculto'>
Contenido a ocultar, puede ser bloques de texto, imágenes, videos o cualquier otro elemento.
</div>

2- Establecer usando CSS inline que no se debe mostrar el contenido.
Por ejemplo:
<div id='oculto' style='display:none;'>
Contenido a ocultar, puede ser bloques de texto, imágenes, videos o cualquier otro elemento.
</div>

3- La función en Javascript necesaria para mostrarlo será la siguiente:
<script type="text/javascript">
function mostrar(){
document.getElementById('oculto').style.display = 'block';}
</script>

4- Un evento, en este ejemplo un botón que permite ejecutar la función y que se muestre el contenido, es el siguiente:
<input type="button" value="Mostrar" onclick="mostrar()">

Código para ocultar elementos


1- Encerrar el contenido a mostrar dentro de un DIV o contenedor y darle un identificador único.
Por ejemplo:
<div id='ver'>
Contenido a mostrar, puede ser bloques de texto, imágenes, videos o cualquier otro elemento.
</div>

2- La función en Javascript necesaria para ocultarlo será la siguiente:
<script type="text/javascript">
function ocultar(){
document.getElementById('ver').style.display = 'none';}
</script>

3- Un evento, en este ejemplo un botón que permite ejecutar la función y que el lector oculte el contenido, es el siguiente:
<input type="button" value="Ocultar" onclick="ocultar()">



Escribir el código del contenido a mostrar usando innerHTML


La propiedad Style display solo oculta y muestra el contenido.
Este oculto o no, el navegador siempre lo cargará completamente.
En los casos que necesitamos evitar cargar imágenes u otros elementos de gran tamaño, necesitamos usar otra opción.
La recomendada es escribir el código HTML que corresponde a estos elementos de forma dinámica, usando la función innerHTML.
Se usa de la siguiente forma.
La función necesaria para mostrar los elementos en el primer ejemplo, suponiendo que sea una imagen será:
<script type="text/javascript">
function mostrar(){
document.getElementById('oculto').innerHTML = '\<img src=\"ruta-a-imagen.jpg\" alt=\"\"\>';}
</script>
Las barras inclinadas se usan para escapar caracteres, que podrían traerle confusión en algunos navegadores.
Más información sobre el uso de innerHTML para escribir código de forma dinámica (sin tener que cargar nuevamente la página), puedes encontrarla en otro articulo de este sitio: Como escribir con Javascript texto y elementos en las páginas web

Paginas relacionadas