Los acordeones con Scritpaculous

Acordeones son esos efectos de los que mucho se ha publicado en los últimos tiempos y que muestran y ocultan bloques de una manera similar a lo que puede hacerse con el efecto Toggle o con el script que simula animaciones pero al que se le agrega un detalle distintivo; dado un grupo de elementos ocultos, al hacer click sobre los botones, no se expanden y contraen de manera independiente sino que todo el grupo cambia, es decir, si despliego uno, el que antes estaba expandido se cierra por lo tanto, el espacio que ocupa todo el conjunto no se modifica.

Difícil de contar en palabras, mejor dos ejemplos:

Mirando aquí y allá, se encuentran varios scripts para crearlos utilizando las librerías de prototype y scritpaculous. El más difundido es Accordion v2.0 pero, personalmente, me ha resultado complicado de aplicar y no hay una buena explicación al respecto. Es, seguramente, el más sofisticado porque permite crear acordeones horizontales y meter unos dentro de otros pero no es el único modelo, hay muchos otros; por ejemplo, en Graphics by Greg describen uno paso a paso e incluyen una página con un ejemplo online; lo mismo puede decirse de otros sitios que disponen de efectos similares para diferentes librerías: Phatfusion, Let me have a blog, Solutoire, PortalZine, moo.fx, DezinerFolio, etc.

Algunos son espectaculares, otros sencillo, algunos tienen problemas en ciertos navegadores, otros son complejos de adaptar a Blogger; personalmente, me quedé con la idea que explican en el mismo sitio de scritpaculous pero simplificándola aún más porque el concepto de un acordeón puede reducirse a esto: hago click en un enlace y, antes de mostrarlo, oculto el anterior así que el script a usar debería ser mínimo y todo lo demás lo ´podríamos resolver con CSS.

Primero que nada necesitamos las librerías que, si no estamos usando, descargamos de su sitio oficial, alojamos en un servidor y luego, las cargamos agregando el siguiente código, justo antes de </head>:

<script src="URL/prototype.js" type="text/javascript">
<script src="URL/scriptaculous.js?load=effects" type='text/javascript">

Y debajo de eso, el script específico que controlará el efecto y un poco de estilo a gusto de cada uno:

<script type="text/javascript">

// los valores iniciales
var cual=0;
var ultimoEnlace='enlacepanel1'; // el botón del panel que está desplegado
var ultimoPanel='panel1'; // el panel que está desplegado

function mostrarPanel(enlace,cual) {

if (enlace==ultimoEnlace)return false; // si ya está desplegado, no hacer nada

// ocultar el panel desplegado y cambiar la clase del enlace
Effect.toggle(ultimoPanel,'blind');
document.getElementById(ultimoEnlace).className='panelOculto'

// desplegar el nuevo panel y cambiar la clase del enlace
document.getElementById(enlace).className='panelVisible'
Effect.toggle(cual,'blind');

// guardar el los nuevos datos del panel desplegado
ultimoEnlace=enlace;
ultimoPanel=cual;

}

</script>

<style type="text/css">
#acordeon { /* es todo el bloque */
width: valorpx; /* el ancho */
/* agregamos propiedades varias */
}

.panelOculto { /* es el botón de los elementos ocultos */
display: block;
width: valorpx; /* el mismo ancho que #acordeon */
height: valorpx; /* la altura del botón */
background: valores;  /* una imagen de fondo, un color */
/* propiedades de las fuentes, márgenes, bordes, etc */
}

.panelVisible { /* es el botón del elemento visible */
display: block;
width: valorpx; /* el mismo ancho que #acordeon */
height: valorpx; /* la altura del botón */
background: valores;  /* otra imagen de fondo, otro color */
/* propiedades de las fuentes, márgenes, bordes, etc */
}

#panel1, #panel2, #panel3, #panel4 { /* enumeramos los botones */
width: 100%; /* el ancho que uno quiera */
height: valorpx; /* si queremos que la altura no sea fija, eliminamos esto */
overflow: hidden;
}

.panelContenido { /* lo que hay dentro de cada panel */
margin: 0;
padding: 0;
height: valorpx; /* si queremos que la altura no sea fija, eliminamos esto */
}
</style>

Ahora hay que explicar un poco y ver cómo lo usamos.

Vamos a crear un acordeón con cuatro botones que serán enlaces y que tendrán cualquier diseño o serán imágenes. Al hacer click en ellos se desplegará un sector con cierto contenido y se cerrará el que esté abierto. El primer enlace, por defecto estará abierto. Todos los "botones cerrados" tendrán un diseño gráfico común y el "botón abierto" un diseño gráfico diferente.

En este ejemplo, el primer botón se llamará enlacepanel1 y los demás enlacepanel2, enlacepanel3 y enlacepanel4. Los botones cerrados tendrá una clase CSS llamada y el abierto, una clase llamada panelOcultopanelVisible.

El contenido de cada uno estará dentro de DIVS que se llamarán panel1, panel2, panel3 y panel4 respectivamente y tendrán una clase CSS común llamada panelContenido.

El HTML a utilizar sería este:

<div id="acordeon">

<div><!-- el primer panel -->
<a class="panelVisible" id="enlacepanel1" href="javascript:void(0);" 
onClick="mostrarPanel('enlacepanel1','panel1'); return false;">
EL TEXTO DEL BOTON 1
</a>
<div id="panel1" style="margin: 0;padding: 0 0 5px 0;">
<div class="panelContenido">... el contenido ...</div>
</div>
</div>

<div><!-- el segundo panel -->
<a class="panelOculto" id="enlacepanel2" href="javascript:void(0);"
onClick="mostrarPanel('enlacepanel2','panel2'); return false">
EL TEXTO DEL BOTON 2
</a>
<div id="panel2" style="display:none;margin: 0;padding: 0 0 5px 0;">
<div class="panelContenido">... el contenido ...</div>
</div>
</div>

<!--
los otros paneles tendrán un código similar
sólo cambiaremos los nombres y los contenidos de cada uno
-->

</div>