Details
Las etiquetas <details> y <summary> se utilizan conjuntamente para implementar un bloque desplegable nativo de tipo acordeón, ideal para estructurar secciones de "Preguntas Frecuentes" (FAQ) o esconder detalles adicionales. Su principal ventaja es que logran toda esta interactividad sin necesidad de utilizar JavaScript.
details
Actúa como el contenedor principal que agrupa todo el bloque.
summary
Funciona como el título visible y clicable del acordeón. Todo el contenido que coloques debajo del <summary> (pero dentro del <details>) permanecerá oculto hasta que el usuario interactúe con él (salvo que uses el atributo open y te aparezca desplegado por defecto)
<details>
<summary>¿Qué ventajas tiene evitar JS para estas tareas?</summary>
<p>Delegar estas funcionalidades al motor de renderizado del navegador (CSS) mejora drásticamente el rendimiento, la fluidez (especialmente en dispositivos móviles) y la accesibilidad, además de reducir el peso de descarga de los archivos JavaScript de la web.</p>
</details>Como bien explica el texto del propio ejemplo, prescindir de JavaScript para estas tareas y delegarlas al motor nativo del navegador aporta beneficios directos en el rendimiento general de la página, mejora la fluidez en móviles y garantiza un comportamiento más accesible para todos los usuarios.