Cómo expandir y contraer texto en HTML

HTML 5 promete ricos sitios web interactivos, pero, en este momento, los navegadores varían en la implementación de funciones y muchas empresas aún no han implementado navegadores compatibles con el nuevo estándar. Aun así, la interacción rica se puede implementar con los navegadores actuales. Para aquellos con poca experiencia con JavaScript, intente usar la propiedad innerHTML de la etiqueta div para expandir y contraer los esquemas y agregar ayuda interactiva a su sitio.

Crear un nuevo proyecto

Abra su herramienta de desarrollo web favorita y cree un nuevo sitio web. Las herramientas de Visual Studio de Microsoft se utilizarán aquí ya que la versión de WebDev se puede descargar de forma gratuita e incluye un servidor web incorporado.

Crear una nueva página HTML

Crear una nueva página default.htm. Haga clic en "Proyecto", "Agregar elemento", luego elija "Página HTML" y asígnele el nombre default.htm. Si ya existe un archivo default.aspx, elimínelo. Cambie a HTML o a la vista de marca y agregue el siguiente código después de la etiqueta.

Página de Ejemplo

1? Título 1

2? Título 2

La etiqueta h3 crea un encabezado de página titulado "Página de muestra", seguido de dos líneas de un esquema. Cada línea comienza con un número, un signo de interrogación y un título. Los signos de interrogación están rodeados por el ancla ((etiquetas que los convierten en enlaces en los que se puede hacer clic. Después de cada título, hemos agregado una etiqueta div vacía donde se puede insertar texto adicional.

Añade el JavaScript

Agregue una función de JavaScript que pueda ser activada por cada uno de los enlaces de signo de interrogación de la siguiente manera:

Cada uno de los enlaces llama a la función JavaScript help_click, pasando el div tagname y algún texto adicional. La función primero prueba para ver si la etiqueta div está vacía (div.innerHTML == “”). Si la etiqueta está vacía, el código agrega un salto de línea (

), tres caracteres en blanco () seguidos por el texto. Si el div ya contiene texto, el marcado dentro de la etiqueta div se borra.

Prueba la nueva página

Prueba el código. Para Visual Studio, haga clic en la tecla "F5". Cuando aparezca la página, haga clic en cualquiera de los signos de interrogación. La primera vez que se hace clic en el enlace de la línea 1, el esquema se expande para incluir el texto "Texto adicional para el Título 1". La segunda vez que se hace clic en el enlace, el texto desaparece. Con un poco de código creativo, esta misma técnica se puede utilizar para crear vistas de árbol, esquemas complejos o para mostrar y ocultar el texto de ayuda.