Qué es Generador de acordeon HTML details?
Los elementos details y summary crean paneles colapsables nativos en HTML. El summary siempre es visible y actua como el interruptor. Al hacer clic, el resto del contenido de details se expande. Se pueden abrir varios details de forma exclusiva, lo que crea un comportamiento de acordeon con el atributo name. Esto funciona sin JavaScript.
Respuesta rápida
Use los elementos nativos HTML details y summary para crear un acordeon que funciona sin JavaScript. Cada elemento details es independiente y puede abrirse o cerrarse por el usuario.
Last updated: 2026-05-25
Limitaciones
- Los elementos details nativos no admiten cerrar una seccion automaticamente cuando otra se abre. Ese comportamiento requiere JavaScript personalizado o el atributo name para el comportamiento de acordeon exclusivo.
- El atributo open controla si el elemento details comienza expandido. Solo hay un estado booleano disponible: no hay expansion parcial.
- Safari 17 y versiones anteriores no admiten animar la apertura y cierre del elemento details. Las transiciones requieren un polyfill de transicion discreta CSS.
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
Cómo usar esta herramienta
- Ingrese los elementos que desea en el acordeon como pares titulo|contenido, uno por linea.
- Elija el modo exclusivo o de apertura multiple para el comportamiento del acordeon.
- La herramienta genera el HTML de details/summary con estilos CSS.
- Copie el marcado y el CSS en su pagina.
Para qué puedes usarla
- Construir un acordeon de FAQ para una pagina de producto o servicio.
- Crear secciones de documentacion colapsables para un sitio de referencia.
- Agregar bloques de contenido expandibles a una entrada de blog para contenido extenso.