El HTML dinámico (DHTML) le permite crear una experiencia de estilo de aplicación en sus sitios web, reduciendo la frecuencia con la que las páginas enteras tienen que ser cargadas por completo. En las aplicaciones, cuando usted hace clic en algo, la aplicación cambia inmediatamente para mostrar ese contenido específico o para proporcionarle una respuesta.

En contraste, las páginas web típicamente tienen que ser recargadas, o una página nueva entera tiene que ser cargada. Esto puede hacer que la experiencia del usuario sea más desarticulada. Sus clientes tienen que esperar a que se cargue la primera página y luego volver a esperar a que se cargue la segunda, y así sucesivamente.

Usando para mejorar la experiencia del espectador

Usando DHTML, una de las maneras más fáciles de mejorar esta experiencia es tener elementos div activados y desactivados para mostrar el contenido cuando se solicita. Un elemento div define las divisiones lógicas en su página web. Piensa en un div como una caja que puede contener párrafos, encabezados, enlaces, imágenes e incluso otros divs.

Lo que necesitará

Para crear un div que pueda ser activado y desactivado, necesitas lo siguiente:

• Un enlace para controlar el div al encenderlo y apagarlo cuando se hace clic en él.
• El div para mostrar y ocultar.
• CSS para dar estilo al div oculto o visible.
• JavaScript para realizar la acción.

El enlace de control

El eslabón de control es la parte más fácil. Simplemente cree un enlace como si fuera a otra página. Por ahora, deje el atributo href en blanco.

Colócalo en cualquier lugar de tu página web.

La Div para mostrar y ocultar

Cree el elemento div que desea mostrar y ocultar. Asegúrese de que su div tiene una identificación única. En el ejemplo, el id único es learn HTML.

Esta es la columna de contenido. Comienza en blanco excepto por este texto explicativo. Elija lo que desea aprender en la columna de navegación de la izquierda. El texto aparecerá a continuación:

Learn HTML

ul>
Free HTML Class / i> / i>.Tutorial de HTML¿Qué es XHTML? / i>      

  El CSS para mostrar y ocultar la división
Cree dos clases para su CSS: una para ocultar el div y otra para mostrarlo. Para ello tiene dos opciones: visualización y visibilidad.
La pantalla elimina el div del flujo de la página, y la visibilidad sólo cambia la forma en que se ve. Algunos codificadores prefieren display, pero a veces visibility también tiene sentido. Por ejemplo:
.hidden { display: none; }
..unhidden { display: block; }

Si desea utilizar la visibilidad, cambie estas clases a:
.hidden { visibilidad: oculta; }
.no oculto { visibilidad: visible; }

Añade la clase oculta a tu div para que empiece como oculta en la página:
  JavaScript para que funcione
Todo lo que hace este script es mirar el conjunto de clases actual en tu div y cambiarlo a un oculto si está marcado como oculto o viceversa.
Esto es sólo unas pocas líneas de JavaScript. Coloque lo siguiente en el encabezado de su documento HTML (antes de la etiqueta :
función unhide(divID) {
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>)var item = document.getElementById(divID);
si (elemento) {
item.className=(item.className==='hidden')?'unhidden':'hidden';
}
}

Lo que hace este guión, línea por línea:


Llama a la función unhide, y divID es exactamente el ID único que desea mostrar u ocultar.


Establece una variable i tem con el valor de su div.


Realiza una simple comprobación del navegador; si el navegador no soporta getElementById, este script no funcionará.


Comprueba la clase en el div. Si está oculto, lo cambia a unhidden. De lo contrario, lo cambia a hidden.


Cierra la sentencia if.


Cierra la función.


Para que el guión funcione, tienes que hacer una cosa más. Vuelve a tu enlace y añade el javascript al atributo href. Asegúrese de usar la identificación única exacta que usted nombró a su div en este href:
Felicitaciones! Ahora tienes un div que se mostrará y ocultará cada vez que hagas clic en un enlace. 
  Posibles problemas a los que hay que estar atento
Este guión no es a prueba de tontos. Hay algunas situaciones en las que podría causarle problemas:


 JavaScript no activado. Si sus lectores no tienen JavaScript o está desactivado, este script no funcionará. Los divs ocultos permanecen ocultos sin importar lo que hagan sus lectores. Una forma de arreglar esto es poner los divs ocultos en un área de noscript, pero tendrás que jugar con eso para conseguir que se muestren correctamente.


 Demasiado Contenido. Esta puede ser una gran herramienta para permitir a sus lectores ver sólo el contenido que necesitan, pero si usted pone demasiado dentro de los divs ocultos, puede afectar drásticamente cómo se carga la página. Recuerde que aunque el contenido no se muestre, el navegador aún lo está descargando, así que utilice el sentido común en cuanto a la cantidad de contenido que esconde.


 Los clientes no entienden. Por último, es posible que los clientes no estén acostumbrados a hacer clic en un enlace que muestre u oculte contenido. Juegue con iconos (los signos y las flechas funcionan bien) o escriba un texto para explicar lo que sucederá a sus clientes. Otra solución es dejar una de las bifurcaciones abierta mientras las otras están cerradas. Esto puede transmitir la idea a sus clientes, para que puedan descubrir más rápidamente cómo abrir el contenido restante.


Siempre debería probar Dynamic HTML de esta manera con sus clientes. Una vez que usted se sienta seguro de que ellos pueden entenderlo y usarlo, esta puede ser una gran manera de obtener una gran cantidad de contenido en sus páginas web sin ocupar mucho espacio visible.