Acordeón CSS animado: ejemplo de prompt IA con código

Este prompt solicita la creación de un acordeón CSS puro, sin JavaScript, que utiliza los elementos nativos de HTML details y summary junto con transformaciones CSS para lograr animaciones fluidas de apertura y cierre. Es especialmente útil cuando se necesita un componente de interfaz ligero y accesible que no dependa de bibliotecas externas, ideal para secciones de preguntas frecuentes, menús colapsables o bloques de contenido expandible en cualquier sitio web.

Para reproducirlo, basta con indicar el modelo (GPT-4, Claude o Gemini funcionan bien) que genere el HTML y CSS correspondiente especificando el número de secciones, los colores deseados y el tipo de transición preferida, ya sea deslizamiento, fundido o rotación del ícono indicador. Una variación interesante es pedir que el acordeón permita solo un panel abierto a la vez, o que incluya soporte para modo oscuro mediante variables CSS, lo que amplía considerablemente su aplicabilidad en proyectos reales.