Hola Irulan (de nuevo
)
Antes de seguir con tu código, mejor te comento unos detalles/errores que contiene:
---> Un span no puede contener una lista dentro <span><ul>...</ul></span>
---> Todo lo que esté dentro de una lista (ul) tiene que estar metido en su correspondiente <li>, así sí: <ul><li> todo lo que quieras</li></ul>. Así no: <ul><algo_que_no_sea_li></ul>
Te pongo unos enlaces de diversos tipos de acordeones:
varios juntos otro Recopilación de unos cuantos (algo más que css)
otra recopilación EDITO para ampliar:
Uno que me encanta
Pero en esa página (
www.csplay.co.uk) tienes para pasar una tarde entera viendo ejemplos:
unos cuantos más ya sean sólo con css o con algún script, lo que los dota de mayores efectos
Sírvete y ya veremos tu elección
Un saludo