Bueno, pues después de perder toda la tarde con ésto, más o menos conseguí lo que quería. Efectivamente se puede meter un acordeón dentro de otro, pero si se deja tal cual no hay quien se aclare, ya que como se puede ver en tu ejemplo, parte del texto se queda oculto y quedan muchos espacios en blanco, por no hablar de las feas barras de desplazamiento de la derecha. Y como bien apuntas, todo tiene el mismo formato.
Por si a alguien le sirve, he encontrado varias opciones que mejoran bastante el aspecto (perdonad que no ponga las fuentes, pero es que sólo copié los "trucos")
- Para evitar que se abra directamente el primer panel, hay que modificar la línea 37 del archivo SpryAccordion.js de 0 a -1:
this.defaultPanel = -1;
- Para que la altura de los paneles no sea fija y no aparezcan las barras de desplazamiento si el contenido es demasiado extenso, hay que cambiar la línea 51 de true a false:
this.useFixedPanelHeights = false;
- Para evitar que aparezca una línea de puntos alrededor del acordeón en algunos navegadores, en el archivo CSS de Spry Accordion, en la clase .Accordion hay que agregar estas dos instrucciones:
-moz-outline: none;
outline: none;
Quedaria asi:
Accordion {
-moz-outline: none;
outline: none;
Si además de todo ésto, cambiamos los colores del texto de cada nivel y poco más, se nos queda un menú bastante decente.
Juaniquillo, gracias de nuevo por tu interés.
Saludos.