Cómo usar el componente Accordion de Adobe Spry

Introducción

Seguramente algunas vez visitamos el sitio web de Adobe, y una de las cosas que más nos llaman la atención es el efecto acordion que se usa para reducir el espacio necesario para mostrar alguna parte de nuestro sitio, y que en el caso de Adobe se usa para que en lugar de tener una tabla con 3 celdas en fila vertical, que corresponden a las secciones: Productos, Soluciones y Sectores; se pueda usar un acordion que al pasar el mouse sobre una sección, esta se expanda y al pasarlo sobre otra suceda lo mismo pero la anterior se vuelve a contraer.

Si no sabes a que me refiero puedes ver el efecto desde la web de Adobe.

También en este tip, aprovecho para explicar algunas cosas sobre el componente Accordion que talvez algunos que nos pik inglish no comprendan, como los comentarios que vienen en el código CSS.

¿Cómo es que nos ayuda este componente?

El componente Accordion (como se nombra en inglés) nos ayuda al momento de tener una gran cantidad de contenido que mostrar, como una lista de links recomendados o las categorías de nuestro blog o sitio, o simplemente para darle un aspecto más elegante a nuestro página web.

Acerca de

La versión de este componente usado en la página de Adobe es la 2007 (ó 2008 no recuerdo bien), la cual esta protegida por una licencia, por lo que sería un delito usarla sin permiso de Adobe.

Pero al menos se encuentra disponible la versión 2006 en estado libre, la cual usaremos para este tip, esta versión es posible descargarla desde Adobe Labs, pero para que te ahorres esta descarga, les dejo los códigos necesarios para su uso. La única desventaja es que se debe dar click sobre la sección para que se expanda.

Usar el componente

Pues luego de todo lo anterior procedamos a crear este efecto.
Primero que nada, al descargar el componente desde Adobe Labs tendríamos 3 archivos:

SpryAccordion.css
SpryAccordion.js
SpryAccordion.html

El primero es la hoja de estilos que define los colores entre otras cosas de cada panel.
El segundo es el que realiza prácticamente todo el trabajo sucio, es un código JavaScript.
El tercero es solo el documento HTML en el que se da el ejemplo para visualizarlo desde el navegador.

Antes de abrir el Dreamweaver debemos de crear una carpeta nueva dentro de cualquier lugar de nuestra PC, esta la llamaremos "Accordion"; solo para tener las cosas en un solo lugar.

Ahora si abrirmos el Dreamweaver (o incluso si no lo tienen basatará con usar el Bloc de notas) y creamos una nueva hoja de estilos en cascada (CSS)

Y agregamos el siguiente código:

Código :

@charset "UTF-8";

/* SpryAccordion.css - version 0.4 - Spry Pre-Release 1.6.1 */

/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

/* Aquí se define el estilo para el contenedor del Accordion. Como estilo
 * predeterminado, se dibujan bordes por la izquierda, derecha y abajo. El borde
 * de la parte de arriba se define por el primer panel en AccordionPanelTab, que 
 * es el de mero arriba, el que nunca se mueve.
 */
.Accordion {
   border-left: solid 1px gray;
   border-right: solid 1px black;
   border-bottom: solid 1px gray;
   overflow: hidden;
}

/* Aquí se define el AccordionPanel, es decir el panel que contiene todas
 * las cosas que ponemos. Aunque no tiene ningún aspecto gráfico
 * es necesario dejarlo en claro que  debe de tener 0 en margin y padding.
 */
.AccordionPanel {
   margin: 0px;
   padding: 0px;
}

/* Aquí se define el AccordionPanelTab, la pestaña que lleva el título
 * del panel y donde se detecta el click para abrir cualquier panel.
 
.AccordionPanelTab {
   background-color: #333;
   border-top: solid 1px black;
   border-bottom: solid 1px gray;
   margin: 0px;
   padding: 2px;
   cursor: pointer;
   -moz-user-select: none;
   -khtml-user-select: none;
   font-size: 14px;
}

/* Aquí se define el AccordionPanelContent, donde se encuentra el contenido del panel.
 * Es importante saber que no se debe de poner ningún padding nunca al area que 
 * del contenido del panel para usar las animaciones. Siempre se debe de poner 0px
 * de padding, porque si no la altura de los paneles se cambian al animarse la expansión.
 * 
 * Cualquiera que estilize un acordion, debe de establecer la altura en el 
 * contenedor con la clase "AccordionPanelContent"
 */
.AccordionPanelContent {
   overflow: auto;
   margin: 0px;
   padding: 0px;
   height: 200px;
            color: #000;
}

/* Este es un ejemplo de como cambiar la apariencia de la pestaña de un panel abierto.
 * La clase "AccordionPanelOpen" es agregada y removida a el panel según el usuario
 * haga click sobre la pestaña del acordion.
 */
.AccordionPanelOpen .AccordionPanelTab {
   background-color:#666;
   font-size: 14px;
}

/* Este es un ejemplo de como cambiar la apariencia de la pestaña del panel cuando 
 * el mouse se coloca sobre ella. El nombre de clase "AccordionPanelTabHover" es
 * agregada y removida de forma programada a las pestañas del panel en mientras el mouse
 * haya abierto un panel. En este caso, yo configuré la CSS a mi gusto, y deje el mismo
 * color (#CCC) para el panel abierto al hacerle over, que a los que quedan cerrados; 
 * pero si lo deseas puedes optar por cambiarlo.
 */
.AccordionPanelTabHover {
   color: #CCC;
}
.AccordionPanelOpen .AccordionPanelTabHover {
   color: #CCC;
}

/* Este es un ejemplo de como personalizar la apariencia de todas las pestañas del panel
/* mientras estemos enfocados en el Accordion. La clase "AccordionFocused" es agregada
/* y removida de forma programada al Accordion al detectarse que se use o no.
/* En esta ocasion también puse el mismo color (#333) al estar usandose o no el acordion. 
/* pero si lo deseas puedes cambiarlo.
 */
.AccordionFocused .AccordionPanelTab {
   background-color: #333;
}

/* Este es un ejemplo de como puede cambiarse la apariencia de la pestaña de panel que esta
/* abierto mientras el panel este en uso.
 * Por cuestion de gustos también deje el color (#666) igual al estar en uso el acordion y 
 * al no estarlo
 */
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
   background-color: #666;
}
[/css]

Iba a explicar cada función de las clases que se especifican, pero me di cuenta de que eran muchas y resultaría muy confuso buscarlas entre el código, así que la explicación la puse junto al código. 

[b]Nota: Es importante que leas los comentarios añadidos al código para que veas algunas reglas básicas en el diseño del componente, y su correcta función.[/b]

Con respecto a las siguientes clases:

[list]
.Accordion
.AccordionPanel
.AccordionPanelTab
.AccordionPanelContent

No es importante su nombre de clase para que el efecto funcione de forma correcta, puedes usar cualquier otro nombre de clase para darle estilo.

Y en todas las partes donde menciono que son solo ejemplos de personalizar el componente Accordion, son solo si queremos definir o personalizar mas el componente. Pero no es necesario que se haga uso de ellos.

En la definición de la clase .AccordionPanelTab se usan las propiedades "-moz-user-select" y "-khtml-user-select" para evitar que el usuario pueda seleccionar el texto en AccordionPanelTab (las pestañas del acordion). Esas propiedades de los navegadores solo funcionan en navegadores basados en Mozilla (como Firefox) y tambien en los que se basan en KHTML (como Safari), pero no pasan la validación de W3C. Si quieres usarlo y que sea válido el código, y no te importa si se puede seleccionar el texto que esta en las pestañas del acordion puedes remover esas 2 líneas, y no se dañará el componente ni sus funciones.

Dejando en claro todo lo anterior, y con nuestro código bien definido y/o corregido procedemos a guardar nuestro documento con el nombre: SpryAccordion y su respectiva extensión (.css)

Ahora procedamos al código JavaScript (JS), el cual posee una declaración sobre derechos de autor etcétera, etcétera, etcétera... en los comentarios. Por lo que les aviso que na vayan a usarlo sin cumplir sus condiciones, las cuales removí para el tip, pero que si desean modificarlo considero que deberán leer el código original desde aquí.

Con respecto al código JavaScript les tengo una mala noticia:

...

Por desgracia no se JS
Y me había propuesto darle un breve analisis al código a ver si entendía algo, pero con solo ver la extensión del código me dió miedo
Así que aquí se los dejo tal cual es (omitiendo lo de la declaración de derechos de autor).
Creamos un nuevo documento de JavaScript y pegamos el siguiente código:

Código :

// SpryAccordion.js - version 0.15 - Spry Pre-Release 1.6.1
//
// Copyright (c) 2006. Adobe Systems Incorporated.
// All rights reserved.

var Spry;
if (!Spry) Spry = {};
if (!Spry.Widget) Spry.Widget = {};

Spry.Widget.Accordion = function(element, opts)
{
   this.element = this.getElement(element);
   this.defaultPanel = 0;
   this.hoverClass = "AccordionPanelTabHover";
   this.openClass = "AccordionPanelOpen";
   this.closedClass = "AccordionPanelClosed";
   this.focusedClass = "AccordionFocused";
   this.enableAnimation = true;
   this.enableKeyboardNavigation = true;
   this.currentPanel = null;
   this.animator = null;
   this.hasFocus = null;

   this.previousPanelKeyCode = Spry.Widget.Accordion.KEY_UP;
   this.nextPanelKeyCode = Spry.Widget.Accordion.KEY_DOWN;

   this.useFixedPanelHeights = true;
   this.fixedPanelHeight = 0;

   Spry.Widget.Accordion.setOptions(this, opts, true);

   this.attachBehaviors();
};

Spry.Widget.Accordion.prototype.getElement = function(ele)
{
   if (ele && typeof ele == "string")
      return document.getElementById(ele);
   return ele;
};

Spry.Widget.Accordion.prototype.addClassName = function(ele, className)
{
   if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) != -1))
      return;
   ele.className += (ele.className ? " " : "") + className;
};

Spry.Widget.Accordion.prototype.removeClassName = function(ele, className)
{
   if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) == -1))
      return;
   ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
};

Spry.Widget.Accordion.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
{
   if (!optionsObj)
      return;
   for (var optionName in optionsObj)
   {
      if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
         continue;
      obj[optionName] = optionsObj[optionName];
   }
};

Spry.Widget.Accordion.prototype.onPanelTabMouseOver = function(e, panel)
{
   if (panel)
      this.addClassName(this.getPanelTab(panel), this.hoverClass);
   return false;
};

Spry.Widget.Accordion.prototype.onPanelTabMouseOut = function(e, panel)
{
   if (panel)
      this.removeClassName(this.getPanelTab(panel), this.hoverClass);
   return false;
};

Spry.Widget.Accordion.prototype.openPanel = function(elementOrIndex)
{
   var panelA = this.currentPanel;
   var panelB;

   if (typeof elementOrIndex == "number")
      panelB = this.getPanels()[elementOrIndex];
   else
      panelB = this.getElement(elementOrIndex);
   
   if (!panelB || panelA == panelB)   
      return null;

   var contentA = panelA ? this.getPanelContent(panelA) : null;
   var contentB = this.getPanelContent(panelB);

   if (!contentB)
      return null;

   if (this.useFixedPanelHeights && !this.fixedPanelHeight)
      this.fixedPanelHeight = (contentA.offsetHeight) ? contentA.offsetHeight : contentA.scrollHeight;

   if (this.enableAnimation)
   {
      if (this.animator)
         this.animator.stop();
      this.animator = new Spry.Widget.Accordion.PanelAnimator(this, panelB, { duration: this.duration, fps: this.fps, transition: this.transition });
      this.animator.start();
   }
   else
   {
      if(contentA)
      {
         contentA.style.display = "none";
         contentA.style.height = "0px";
      }
      contentB.style.display = "block";
      contentB.style.height = this.useFixedPanelHeights ? this.fixedPanelHeight + "px" : "auto";
   }

   if(panelA)
   {
      this.removeClassName(panelA, this.openClass);
      this.addClassName(panelA, this.closedClass);
   }

   this.removeClassName(panelB, this.closedClass);
   this.addClassName(panelB, this.openClass);

   this.currentPanel = panelB;

   return panelB;
};

Spry.Widget.Accordion.prototype.closePanel = function()
{
   // The accordion can only ever have one panel open at any
   // give time, so this method only closes the current panel.
   // If the accordion is in fixed panel heights mode, this
   // method does nothing.

   if (!this.useFixedPanelHeights && this.currentPanel)
   {
      var panel = this.currentPanel;
      var content = this.getPanelContent(panel);
      if (content)
      {
         if (this.enableAnimation)
         {
            if (this.animator)
               this.animator.stop();
            this.animator = new Spry.Widget.Accordion.PanelAnimator(this, null, { duration: this.duration, fps: this.fps, transition: this.transition });
            this.animator.start();
         }
         else
         {
            content.style.display = "none";
            content.style.height = "0px";
         }
      }      
      this.removeClassName(panel, this.openClass);
      this.addClassName(panel, this.closedClass);
      this.currentPanel = null;
   }
};

Spry.Widget.Accordion.prototype.openNextPanel = function()
{
   return this.openPanel(this.getCurrentPanelIndex() + 1);
};

Spry.Widget.Accordion.prototype.openPreviousPanel = function()
{
   return this.openPanel(this.getCurrentPanelIndex() - 1);
};

Spry.Widget.Accordion.prototype.openFirstPanel = function()
{
   return this.openPanel(0);
};

Spry.Widget.Accordion.prototype.openLastPanel = function()
{
   var panels = this.getPanels();
   return this.openPanel(panels[panels.length - 1]);
};

Spry.Widget.Accordion.prototype.onPanelTabClick = function(e, panel)
{
   if (panel != this.currentPanel)
      this.openPanel(panel);
   else
      this.closePanel();

   if (this.enableKeyboardNavigation)
      this.focus();

   if (e.preventDefault) e.preventDefault();
   else e.returnValue = false;
   if (e.stopPropagation) e.stopPropagation();
   else e.cancelBubble = true;

   return false;
};

Spry.Widget.Accordion.prototype.onFocus = function(e)
{
   this.hasFocus = true;
   this.addClassName(this.element, this.focusedClass);
   return false;
};

Spry.Widget.Accordion.prototype.onBlur = function(e)
{
   this.hasFocus = false;
   this.removeClassName(this.element, this.focusedClass);
   return false;
};

Spry.Widget.Accordion.KEY_UP = 38;
Spry.Widget.Accordion.KEY_DOWN = 40;

Spry.Widget.Accordion.prototype.onKeyDown = function(e)
{
   var key = e.keyCode;
   if (!this.hasFocus || (key != this.previousPanelKeyCode && key != this.nextPanelKeyCode))
      return true;
   
   var panels = this.getPanels();
   if (!panels || panels.length < 1)
      return false;
   var currentPanel = this.currentPanel ? this.currentPanel : panels[0];
   var nextPanel = (key == this.nextPanelKeyCode) ? currentPanel.nextSibling : currentPanel.previousSibling;

   while (nextPanel)
   {
      if (nextPanel.nodeType == 1 /* Node.ELEMENT_NODE */)
         break;
      nextPanel = (key == this.nextPanelKeyCode) ? nextPanel.nextSibling : nextPanel.previousSibling;
   }

   if (nextPanel && currentPanel != nextPanel)
      this.openPanel(nextPanel);

   if (e.preventDefault) e.preventDefault();
   else e.returnValue = false;
   if (e.stopPropagation) e.stopPropagation();
   else e.cancelBubble = true;

   return false;
};

Spry.Widget.Accordion.prototype.attachPanelHandlers = function(panel)
{
   if (!panel)
      return;

   var tab = this.getPanelTab(panel);

   if (tab)
   {
      var self = this;
      Spry.Widget.Accordion.addEventListener(tab, "click", function(e) { return self.onPanelTabClick(e, panel); }, false);
      Spry.Widget.Accordion.addEventListener(tab, "mouseover", function(e) { return self.onPanelTabMouseOver(e, panel); }, false);
      Spry.Widget.Accordion.addEventListener(tab, "mouseout", function(e) { return self.onPanelTabMouseOut(e, panel); }, false);
   }
};

Spry.Widget.Accordion.addEventListener = function(element, eventType, handler, capture)
{
   try
   {
      if (element.addEventListener)
         element.addEventListener(eventType, handler, capture);
      else if (element.attachEvent)
         element.attachEvent("on" + eventType, handler);
   }
   catch (e) {}
};

Spry.Widget.Accordion.prototype.initPanel = function(panel, isDefault)
{
   var content = this.getPanelContent(panel);
   if (isDefault)
   {
      this.currentPanel = panel;
      this.removeClassName(panel, this.closedClass);
      this.addClassName(panel, this.openClass);

      // Attempt to set up the height of the default panel. We don't want to
      // do any dynamic panel height calculations here because our accordion
      // or one of its parent containers may be display:none.

      if (content)
      {
         if (this.useFixedPanelHeights)
         {
            // We are in fixed panel height mode and the user passed in
            // a panel height for us to use.
   
            if (this.fixedPanelHeight)
               content.style.height = this.fixedPanelHeight + "px";
         }
         else
         {
            // We are in variable panel height mode, but since we can't
            // calculate the panel height here, we just set the height to
            // auto so that it expands to show all of its content.
   
            content.style.height = "auto";
         }
      }
   }
   else
   {
      this.removeClassName(panel, this.openClass);
      this.addClassName(panel, this.closedClass);

      if (content)
      {
         content.style.height = "0px";
         content.style.display = "none";
      }
   }
   
   this.attachPanelHandlers(panel);
};

Spry.Widget.Accordion.prototype.attachBehaviors = function()
{
   var panels = this.getPanels();
   for (var i = 0; i < panels.length; i++)
      this.initPanel(panels[i], i == this.defaultPanel);

   // Advanced keyboard navigation requires the tabindex attribute
   // on the top-level element.

   this.enableKeyboardNavigation = (this.enableKeyboardNavigation && this.element.attributes.getNamedItem("tabindex"));
   if (this.enableKeyboardNavigation)
   {
      var self = this;
      Spry.Widget.Accordion.addEventListener(this.element, "focus", function(e) { return self.onFocus(e); }, false);
      Spry.Widget.Accordion.addEventListener(this.element, "blur", function(e) { return self.onBlur(e); }, false);
      Spry.Widget.Accordion.addEventListener(this.element, "keydown", function(e) { return self.onKeyDown(e); }, false);
   }
};

Spry.Widget.Accordion.prototype.getPanels = function()
{
   return this.getElementChildren(this.element);
};

Spry.Widget.Accordion.prototype.getCurrentPanel = function()
{
   return this.currentPanel;
};

Spry.Widget.Accordion.prototype.getPanelIndex = function(panel)
{
   var panels = this.getPanels();
   for( var i = 0 ; i < panels.length; i++ )
   {
      if( panel == panels[i] )
         return i;
   }
   return -1;
};

Spry.Widget.Accordion.prototype.getCurrentPanelIndex = function()
{
   return this.getPanelIndex(this.currentPanel);
};

Spry.Widget.Accordion.prototype.getPanelTab = function(panel)
{
   if (!panel)
      return null;
   return this.getElementChildren(panel)[0];
};

Spry.Widget.Accordion.prototype.getPanelContent = function(panel)
{
   if (!panel)
      return null;
   return this.getElementChildren(panel)[1];
};

Spry.Widget.Accordion.prototype.getElementChildren = function(element)
{
   var children = [];
   var child = element.firstChild;
   while (child)
   {
      if (child.nodeType == 1 /* Node.ELEMENT_NODE */)
         children.push(child);
      child = child.nextSibling;
   }
   return children;
};

Spry.Widget.Accordion.prototype.focus = function()
{
   if (this.element && this.element.focus)
      this.element.focus();
};

Spry.Widget.Accordion.prototype.blur = function()
{
   if (this.element && this.element.blur)
      this.element.blur();
};

/////////////////////////////////////////////////////

Spry.Widget.Accordion.PanelAnimator = function(accordion, panel, opts)
{
   this.timer = null;
   this.interval = 0;

   this.fps = 60;
   this.duration = 500;
   this.startTime = 0;

   this.transition = Spry.Widget.Accordion.PanelAnimator.defaultTransition;

   this.onComplete = null;

   this.panel = panel;
   this.panelToOpen = accordion.getElement(panel);
   this.panelData = [];
   this.useFixedPanelHeights = accordion.useFixedPanelHeights;

   Spry.Widget.Accordion.setOptions(this, opts, true);

   this.interval = Math.floor(1000 / this.fps);

   // Set up the array of panels we want to animate.

   var panels = accordion.getPanels();
   for (var i = 0; i < panels.length; i++)
   {
      var p = panels[i];
      var c = accordion.getPanelContent(p);
      if (c)
      {
         var h = c.offsetHeight;
         if (h == undefined)
            h = 0;

         if (p == panel && h == 0)
            c.style.display = "block";

         if (p == panel || h > 0)
         {
            var obj = new Object;
            obj.panel = p;
            obj.content = c;
            obj.fromHeight = h;
            obj.toHeight = (p == panel) ? (accordion.useFixedPanelHeights ? accordion.fixedPanelHeight : c.scrollHeight) : 0;
            obj.distance = obj.toHeight - obj.fromHeight;
            obj.overflow = c.style.overflow;
            this.panelData.push(obj);

            c.style.overflow = "hidden";
            c.style.height = h + "px";
         }
      }
   }
};

Spry.Widget.Accordion.PanelAnimator.defaultTransition = function(time, begin, finish, duration) { time /= duration; return begin + ((2 - time) * time * finish); };

Spry.Widget.Accordion.PanelAnimator.prototype.start = function()
{
   var self = this;
   this.startTime = (new Date).getTime();
   this.timer = setTimeout(function() { self.stepAnimation(); }, this.interval);
};

Spry.Widget.Accordion.PanelAnimator.prototype.stop = function()
{
   if (this.timer)
   {
      clearTimeout(this.timer);

      // If we're killing the timer, restore the overflow
      // properties on the panels we were animating!

      for (i = 0; i < this.panelData.length; i++)
      {
         obj = this.panelData[i];
         obj.content.style.overflow = obj.overflow;
      }
   }

   this.timer = null;
};

Spry.Widget.Accordion.PanelAnimator.prototype.stepAnimation = function()
{
   var curTime = (new Date).getTime();
   var elapsedTime = curTime - this.startTime;

   var i, obj;

   if (elapsedTime >= this.duration)
   {
      for (i = 0; i < this.panelData.length; i++)
      {
         obj = this.panelData[i];
         if (obj.panel != this.panel)
         {
            obj.content.style.display = "none";
            obj.content.style.height = "0px";
         }
         obj.content.style.overflow = obj.overflow;
         obj.content.style.height = (this.useFixedPanelHeights || obj.toHeight == 0) ? obj.toHeight + "px" : "auto";
      }
      if (this.onComplete)
         this.onComplete();
      return;
   }

   for (i = 0; i < this.panelData.length; i++)
   {
      obj = this.panelData[i];
      var ht = this.transition(elapsedTime, obj.fromHeight, obj.distance, this.duration);
      obj.content.style.height = ((ht < 0) ? 0 : ht) + "px";
   }
   
   var self = this;
   this.timer = setTimeout(function() { self.stepAnimation(); }, this.interval);
};

Si alguien aquí sabe JS y se atreviese a explicar el código anterior, creo que ya tiene una buena razón para escribir un tip sobre esto
Lo guardamos como SpryAccordion con la extensión de un código JavaScript (.js)

Pues ahora pasemos al documento HTML.
Creamos un nuevo documento HTML, y pegamos el siguiente código:

Código :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<!-- Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. --> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>Spry Accordion</title> 
<!-- inicia referencia al código JavaScript del componente Accordion -->
<script language="JavaScript" type="text/javascript" src="SpryAccordion.js"></script> 
<!-- termina referencia al código JavaScript del componente Accordion -->
<!-- inicia referencia a la hoja de estilos en cascada -->
<link href="SpryAccordion.css" rel="stylesheet" type="text/css" /> 
<!-- termina referencia a la hoja de estilos en cascada -->
<!-- inicia definición de estilos de la tipografía del documento HTML -->
<style type="text/css">
<!--
body,td,th {
   font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
   font-size: 12px;
   color: #FFF;
}
-->
</style>
<!-- termina definición de estilos de la tipografía del documento HTML -->
</head> 
<body>
<!-- inicia el acordeon --> 
<div class="Accordion" id="sampleAccordion" tabindex="0"> 
<!-- empieza el panel 1 -->
   <div class="AccordionPanel"> 
    <!-- empieza la pestaña -->
      <div class="AccordionPanelTab">Panel 1</div>
        <!-- termina la pestaña -->
        <!-- empieza el contenido del panel -->
      <div class="AccordionPanelContent"> 
         Aquí va el contenido del panel 1<br /> 
      </div>
        <!-- termina el contenido del panel --> 
   </div> 
    <!-- termina el panel 1 -->
    <!-- Así como fue el panel 1, se definen todos los demás -->
   <div class="AccordionPanel"> 
      <div class="AccordionPanelTab">Panel 2</div> 
      <div class="AccordionPanelContent"> 
         Aquí va el contenido del panel 2
      </div> 
   </div> 
   <div class="AccordionPanel"> 
      <div class="AccordionPanelTab">Panel 3</div> 
      <div class="AccordionPanelContent"> 
         Aquí va el contenido del panel 3
      </div> 
   </div> 
   <div class="AccordionPanel"> 
      <div class="AccordionPanelTab">Panel 4</div> 
      <div class="AccordionPanelContent"> 
         Aquí va el contenido del panel 4
      </div> 
   </div> 
    <!-- por último se cierra el acordeon -->
</div> 
<!-- como ya dije no se JS,así que no explico nada  -->
<script language="JavaScript" type="text/javascript"> 
var sampleAccordion = new Spry.Widget.Accordion("sampleAccordion");
</script> 
</body> 
</html> 

Guardamos el archivo como SpryAccordion con la extensión (.html)
El código también lo explico en él.
El resultado final lo puedes visualizar desde aquí
Para más información puedes entrar a Adobe Labs > Accordion Widget

Descargar archivos del tip (RAR)

Descargar archivos del tip (ZIP)

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.