1 JavaScript; - Contraer y expandir un documento

1 1 Introducción

En algunas páginas que hay en la Red, existe la posibilidad de contraer o expandir sucesivamente una parte del cuerpo de la página, normalmente cuando se incluyen códigos o textos a modo de ejemplo que ilustra algún aspecto explicado en el texto.

Este documento muestra como se puede conseguir ese efecto.

↑↑↑

1.2 El proceso

Para que el proceso funcione, se necesitan varios pasos

En primero lugar convertir el documento en un documento XHTML
Pensar en el documento como un documento XML o XHTML y tratarlo como tal empleando el sistema de objetos DOM, por lo que a partir de ahora no hablaremos de etiquetas, sino que hablaremos de NODOS del documento
Marcar el texto que se quiere contraer/expandir. La forma de proceder es convertir ese texto en un NODO; esto se puede hacer rodeando el texto con una etiqueta <div></div> o utilizando alguna etiqueta existente que cumpla el mismo propósito, por ejemplo <pre> o <table>. Una vez que tengo el texto dentro de un Nodo, lo identificamos de forma única con el atributo ID
Escribir un enlace que cambie la propiedad Display del nodo que queremos [mostrar/ocultar] para hacer esta operación tendremos que utilizar código JavaScript. Este código utilizara la interfaz DOM para modificar el código del documento

↑↑↑

1.2.1 El nodo que se contrae

+ Ocultar

<pre id="CodigoPrograma01" 
    style="display: none;">
    hola textoContraible Linea uno
    hola textoContraible Linea dos
 </pre>

Comentarios

El nodo DOM que se oculta es el nodo <pre>
El atributo XHTML, ID identifica a este nodo de una forma única en todo el documento. Recuerda que un atributo ID tiene que tener un valor único en el documento, no puede estar repetido.
La propiedad CSS, Display es la que con sus valores muestra u oculta el nodo a la que esta aplicada. El Valor [display: none;] oculta el nodo. Con el valor [display: block;] el nodo es visible

↑↑↑

1.2.2 La interfaz de usuario para mostrar /ocultar el nodo

+ Ocultar

<p>
   <a id="xCodigoPrograma01" 
      onclick="MostrarOcultar('CodigoPrograma01');" 
      href="#_self">
         + Mostrar
    </a>
</p>

Comentarios

El nodo que contiene el enlace <a> es el que tiene el código que pone en marcha todo el proceso
El atributo XHTML, ID [id="xCodigoPrograma01"] es el id que identifica de forma única esta etiqueta <a> Observa que es el mismo ID que el que tiene la etiqueta <pre> pero precedido de la letra 'x'
El evento 'onclick' es el que llama a la función JavaScript que hace realmente el trabajo de cambiar el texto
El atributo href="#_self" indica que no se salte a ningún sitio

↑↑↑

1.2.3 El código JavaScript

+ Ocultar

<!-- ''''''''''''''' JavaScript ''''''''''''''' -->
<!-- Indicar que en esta pagina hay codigo JavaScript -->
<meta http-equiv="Content-Script-Type" content="text/javascript" />

<!-- Codigo JavaScript interno de este documento -->        
<script language="javascript" type="text/javascript">
//<![CDATA[
<!-- 

//...........................................................................
// Funcion que muestra u oculta un texto 
// trabaja utilizando la interfaz DOM
//...........................................................................
function MostrarOcultar( ref ) 
{  
  // Nodo del documento que se [muestra /oculta]
  // Tiene que tener un ID unico
  var nodoContraible  = document.getElementById(ref); 

  // Nodo que contiene el [enlace] que maneja el que se [muestra /oculta]
  // DEBE tener el mismo ID que el nodo [nodoContraible] pero precedido por una x
  var xNodoDelEnlace = document.getElementById("x" + ref); 
  
  if (nodoContraible.style.display =='none') 
  { 
     xNodoDelEnlace.innerHTML = ' - Ocultar'; 
     nodoContraible.style.display ="block"; 
  } 
  else 
  { 
    xNodoDelEnlace.innerHTML = ' + Mostrar '; 
    nodoContraible.style.display ='none'; 
  } 
} 

// --> 
//]]>
</script>

Comentarios

El script [MostrarOcultar(ref)] recibe la referencia ID de un nodo que se va a ocultar, tal y como hemos definido las condiciones de trabajo, si el ID del nodo a ocultar es "codigoUno", la referencia ID del nodo que contiene el enlace que maneja el proceso tiene que ser el mismo precedido por una "x" es decir "xcodigoUno",
Primero se localizan los nodos que contienen esos ID, uno será el nodo que se contrae, y el otro el nodo que contiene el enlace
La función cambia el valor display del nodo que se contrae, y el valor innerHTML del nodo del enlace. Recuerda que la propiedad innerHTML cambia el contenido del nodo, en este caso la cadena de texto ' + Mostrar ' u ' - Ocultar'.
De esta manera, el script hace dos trabajos, por una parte oculta/muestra el nodo, y por otra cambia el texto que se muestra en el enlace.

↑↑↑

1.2.4 Un ejemplo de cómo funciona

+ Mostrar Ejemplo uno contraido al iniciar

     hola textoContraible Linea uno
     hola textoContraible Linea dos

↑↑↑

1.3 Aplicar un Formato Visual

↑↑↑

1.3.1 Los estilos CSS

El código mostrado es un código básico, la realidad es que (normalmente) queremos que la página, el documento resulte vistoso, para lo que tenemos que aplica estilos,

Por ejemplo, aplicaremos en el nodo <head></head> las siguientes líneas de estilo

+ Ocultar

<!-- '''''''''''''' ESTILOS CSS ''''''''''''''' -->
<meta http-equiv="Content-Script-Style" content="text/css" />
<link media="all" rel="stylesheet" type="text/css" href="../cssJS/2008.css" />
<style type="text/css" media="all" >
/*<![CDATA[*/
<!-- 

/* estilo para expandir contraer pre */
.expandirContraerCSS 
{
      font-family:Arial helvetica; 
      color:#AA0000; 
      font-weight:bold;
      text-decoration: none;
      font-size: smaller; 
      border-bottom: #cccccc 1px solid; 
      background-color: #fbedbb;
      width:100%;
      margin-bottom: 0px; 
      margin-top: 0px;
}

.pre_titulo
{
      color: #ffffff;
      background-color: #006699;
      font-weight: bold;
      text-align: left;
      margin-top: 0.5cm;
      margin-bottom: 0cm;
}

pre
{
      background-color:#FBEDBB;
      padding-right: 7pt; 
      padding-left: 7pt;
      padding-bottom: 7pt; 
      padding-top: 7pt; 
      font-family: "Courier New", Courier, mono;
      font-size:9pt;
      white-space: pre;
      overflow:auto;
}
   
 -->

  /*]]>*/ 
</style>

↑↑↑

1.3.2 El código HTML

+ Ocultar

		
<!-- Enlace para llamar a la funcion -->
<p class="expandirContraerCSS">
   <a id="xCodigoPrograma02" 
      onclick="MostrarOcultar('CodigoPrograma02');" 
      href="#_self"
      class="expandirContraerCSS" >
            + Mostrar
   </a>
</p>

Comentarios

El nodo que contiene el enlace <a> es el que tiene el código que pone en marcha todo el proceso
El atributo XHTML, ID [id="xCodigoPrograma01"] es el id que identifica de forma única esta etiqueta <a> Observa que es el mismo ID que el que tiene la etiqueta <pre> pero precedido de la letra 'x'
El evento 'onclick' es el que llama a la función JavaScript que hace realmente el trabajo de cambiar el texto
El atributo href="#_self" indica que no se salte a ningún sitio
El atributo class="expandirContraerCSS " es la clase que contiene los estilos CSS para modificar la presentación visual, realmente no es necesaria pero queda más bonito visualmente hablando

+ Ocultar

   <!-- Texto con un titulo que siempre tiene que estar visible -->
   <p class="pre_titulo">
      Este es un TITULO, siempre visible, con fondo azulon y letras blancas
   </p>

  <!-- Zona que se oculta -->
  <pre id="CodigoPrograma02" style="display: block;  margin-top: 0px;">
     hola textoContraible Linea uno
     hola textoContraible Linea dos
  </pre>

Cometarios

El nodo DOM que se oculta es el nodo <pre>
El atributo XHTML, ID identifica a este nodo de una forma única en todo el documento. Recuerda que un atributo ID tiene que tener un valor único en el documento, no puede estar repetido.
La propiedad CSS, Display es la que con sus valores muestra u oculta el nodo a la que esta aplicada. El Valor [display: none;] oculta el nodo. Con el valor [display: block;] el nodo es visible
La propiedad style se emplea para "pegar" el texto al texto anterior sin que quede ningún espacio en blanco

↑↑↑

1.3.3 Un ejemplo de cómo funciona

+ Mostrar Ejemplo uno con titulo y expandido al iniciar

Este es un TITULO, siempre visible, con fondo azulon y letras blancas

     hola textoContraible Linea uno
     hola textoContraible Linea dos

↑↑↑

1.4 Código de ejemplo

En el siguiente enlace hay un fichero ZIP que contiene ejemplo
* Fichero con el código de ejemplo: [ContraerExpandir_Ejemplo.zip ] [ 2,42 KB ]
* MD5 checksum: [CD38661FB897E16BB4345978D20D4B1F]
* MD5 checksum: Información [http://www.elguille.info/colabora/MD5_checksum.aspx]

Contraer y expandir con JavaScript

Descripción general

[TOC] Tabla de Contenidos

1 JavaScript; - Contraer y expandir un documento

1 1 Introducción

1.2 El proceso

1.2.1 El nodo que se contrae

1.2.2 La interfaz de usuario para mostrar /ocultar el nodo

1.2.3 El código JavaScript

1.2.4 Un ejemplo de cómo funciona

1.3 Aplicar un Formato Visual

1.3.1 Los estilos CSS

1.3.2 El código HTML

1.3.3 Un ejemplo de cómo funciona

1.4 Código de ejemplo

A.2.Enlaces

A.3.Información del documento