Contraer y expandir con

JavaScript

Descripción general

En este documento se describe como es el código JavaScript que hay que añadir a un
documento HTML para que una parte del mismo se pueda contraer y expandir

[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

1
 ↑↑↑
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

2
 ↑↑↑
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

3
 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";

4
 }
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

↑↑↑
1.3 Aplicar un Formato Visual

↑↑↑

5
 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
{

6
 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

7
 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

8
 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]

↑↑↑
A.2.Enlaces

[Para saber mas]

HTML 40
XHTML
XML 10
DOM
CSS 2
CSS 1
Atributo (HTML), ID
Atributo (HTML), href
Atributo (HTML), class
La propiedad (CSS), display
La propiedad (CSS), display (Otro)
La propiedad (DOM) innerHTML

[Grupo de documentos]
[Documento Index]
[Documento Start]
[Imprimir el Documento]

9
 ¡ No Olvides ñadir éste sitio a tus marcadores favoritos ! Pulsa (Ctrl + D)

↑↑↑
A.3.Información del documento

Título
Contraer y expandir con JavaScript
Autor
Joaquin Medina Serrano
[mailto:joaquin@medina.name]
[http://joaquin.medina.name/]
jms32
Palabras claves de busqueda
'atributo ID', contraer, DOM, expandir, 'interfaz DOM', JavaScript, NODO, 'propiedad
Display', XHTML, XML
Contenido del documento
En este documento se describe como es el código JavaScript que hay que añadir a un
documento HTML para que una parte del mismo se pueda contraer y expandir
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 ]
Archivado en:
informática\programación\javaScript
Fechas
Fecha Creación
2008-10-12T20:43:13 [domingo, 12 de octubre de 2008 a las 20:43:13 horas]
Fecha Publicación
2008-10-12T20:43:14 [domingo, 12 de octubre de 2008 a las 20:43:14 horas]
Fecha de la última actualización en disco
2013/11/26T10:34:39 [Martes, 26 de Noviembre de 2013 a las 10:34]

10
 Fecha última Modificación
2008-10-12T20:43:14 [domingo, 12 de octubre de 2008 a las 20:43:14 horas]
Naturaleza del recurso
Text
IMT (Internet Media Type)
text/xhtml+xml
Juego de caracteres)
ISO 8859-1
Referencia Bibliográfica
Referencia bibliográfica del documento ORIGINAL
* Display: none o [http://www.sidar.org/recur/desdi/mcss/manual/ejemplos
/display.html]
Situación del documento ORIGINAL en la red
[http://www.sidar.org/recur/desdi/mcss/manual/ejemplos/display.html]
Idioma
es-ES [es = Español] [ES = España]
Copyright
Texto con los derechos
© Copyright Joaquin 'jms32®' Medina Serrano 1.997-2008 - Reservados todos los
derechos.
Información obtenida con JavaScript
Situación de ESTE documento en la red
http://joaquin.medina.name/web2008/documentos/informatica/lenguajes/javaScript
/contraerExpandir/2008_10_12_ContraerExpandir.html
¿ Quien ha llamado a ésta página ?
http://joaquin.medina.name/web2008/documentos/informatica/lenguajes/javaScript
/__IndiceInformaticaLenguajesJavaScript.html
Navegador empleado para ver ésta página
Netscape 5

© 1997 - 119 - La Güeb de Joaquín

Joaquin Medina Serrano [ Mail ] [ Web ]
Ésta página es española

11