Acordeón con JQuery
Aquí va un pequeño eemplo del uso de JQuery. Trata sobre un acordeón, que aunque simple puede resultar útil en cuestiones de presentación, utilización de espacio y servirá para demostrar lo fácil que es utilizar JQuery. Aún me queda mucho por aprender con JQuery, pero espero que este ejemplito sirva a alguien.
Para visualizarlo mejor, copiar el código y ponerlo en tu editor favorito. Aún no me he dado tiemp de agregar algún editor de formatos par ael código de mis post 
. AH!, y tambien, no olvidar que se debe descargar la última versión de JQuery e incluirla en el mismo directorio que el ejemplo.
<HTML>
<HEAD>
<TITLE>Ejemplo</TITLE>
<SCRIPT type="text/javascript" src="jquery.js"></SCRIPT>
<SCRIPT type="text/javascript">
$(document).ready(function()
{
// oculta todos los div que se encuentren visibles y esten en el tercer subnivel dentro de la jerarquida de div.
// En nuestro caso, tenemos un div general, luego los div contenedores, y dentro de cada uno, los div que contienen el texto según cada bloque.
// Esta acción se realiza sólo la primera vez, cuando la página está cargada
$("div > div > div:visible").hide();
// Cada vez que se haga click sobre cualquier enlace que pertenezca a la clase cabecera_bloque, se realizara la función de a continuación
$("a.cabecera_bloque").click(function()
{
// enrolla los div de tercer nivel que se encuentren visibles
$("div > div > div:visible").slideUp();
// obtiene el div inmediato superior al enlace sobre el cual se pulso, es decir, el div que contien al enlace pulsado
var div_medio = $(this).parent();
// construimos la cadena de busqueda que representa a los div ocultos que se encuentren dentro del div inmediato superior al enlace sobre el cual se ha pulsado
var div_inferior_oculto = "div#" + div_medio.attr("id") + " > div:hidden";
// con la cadena construida, procedemos a desenrollar los div respectivos.
$(div_inferior_oculto).slideDown();
// para interrumpir y eliminar el comportamiento del enlace, hacemos que retorne false. De esta manera ya no nos redirigira a index1.html#
return false;
});
});
</SCRIPT>
<style> a{ font-weight: bold; } </style>
</HEAD>
<BODY>
<div style="width: 250px">
<div id="contenedor1" style="background: #FFAAAA">
<A href="#" class="cabecera_bloque" >Algo de rojo</A>
<BR />
<div>
Contenido del Primer Bloque.
<BR />
Contenido del Primer Bloque. Contenido del Primer Bloque.
</div>
<div>
<B>Otro párrafo de</B> Contenido del Primer Bloque.
<BR />Contenido del Primer Bloque. Contenido del Primer Bloque.
</div>
</div>
<div id="contenedor2" style="background: #AAAAFF">
<A href="#" class="cabecera_bloque" >Algo de azul</A>
<BR />
<div>
Contenido del Segundo Bloque. Contenido del Segundo Bloque.
<BR />
Contenido del Segundo Bloque. Contenido del Segundo Bloque.
</div>
</div>
<div id="contenedor3" style="background: #AAFFAA">
<A href="#" class="cabecera_bloque" >Algo de verde</A>
<BR />
<div>
Contenido del Tercer Bloque. Contenido del Tercer Bloque.
<BR />Contenido del Tercer Bloque. Contenido del Tercer Bloque.
</div>
<div>
<B>Otro párrafo de</B> <I>Contenido del Tercer Bloque. Contenido del Tercer Bloque.</I>
</div>
</div>
<div width="120px">
</BODY>
</HTML>
