Manipulación con CSS:
Además de los estilos que definamos para mejorar la apariencia del acordeón, Spry utiliza otras 4 clases que podemos aprovechar para modificar la apariencia de los paneles en diferentes estados. Estas 4 clases son:

• AccordionPanelLabelHover: Pasamos el ratón por encima del label
• AccordionPanelOpen: El panel se encuentra abierto
• AccordionPanelClosed: El panel se encuentra cerrado
• AccordionFocused: Nuestro accordion tiene el focus en el documento. Para que se pueda utilizar, es necesario que el bloque contenedor del acordeón tenga definido el atributo ‘tabindex’

Spry utiliza estas clases de forma dinámica (a la hora de abrir, cerrar o crear paneles), por lo que su uso permite mejorar aún más la apariencia del conjunto.

El Ejemplo 2 muestra el acordeón con algunos estilos aplicados y aprovecha las clases generadas por Spry ‘AccordionPanelOpen’ y ‘AccordionFocused’ para cambiar el color de la pestaña cuando el panel se encuentra abierto y cuando el conjunto gana o pierde el foco. Además, el uso del atributo tabindex permite el uso de los cursores arriba y abajo para navegar por los paneles y la tecla tab para ganar y perder el foco.