Crear un acordeón con PE

La versión con PE de un acordeón usa únicamente HTML: el par de elementos nativos <details>/<summary>. Haga clic en summary para alternar el panel. Funciona sin CSS, sin JS y sin framework: forma parte de HTML.

<summary> es un botón que puede recibir el foco y activarse con el teclado (Enter/Space alterna su estado). Los lectores de pantalla anuncian el estado expandido/contraído. Dos elementos HTML proporcionan lo que a un acordeón personalizado de React puede llevarle decenas de líneas de ARIA y gestión de eventos conseguir.

Estilice el triángulo de expansión, el relleno del panel y las transiciones con CSS convencional. El atributo open refleja el estado, por lo que details[open] summary { color: blue; } se aplica solo cuando está expandido. No se necesita JS para mejorar el aspecto visual.

La apertura y el cierre predeterminados son instantáneos. Puede animarlos mediante una transición de content-visibility o mediante JS que mida la altura del panel y anime max-height. En casos sencillos, el cambio abrupto es aceptable; la animación es una mejora progresiva aplicada con CSS+JS.

JS puede añadir funciones adicionales: cerrar otros acordeones cuando se abre uno (modo de apertura única), conservar el estado abierto en localStorage, animar la transición o registrar mediante análisis qué entradas están expandidas. Cada mejora es puramente aditiva.

<details> dispara un evento toggle cada vez que cambia su estado open. Úselo para reaccionar a la expansión del usuario sin volver a configurar controladores de clic. Es compatible tanto con clics del ratón como con la activación mediante el teclado.

Para renderizar un acordeón inicialmente abierto, establezca el atributo open en el servidor: <details open>. El estado está en el HTML, disponible para los rastreadores y para los usuarios con conexiones lentas antes de que se ejecute JS.

Si el diseño requiere un icono personalizado de expansión/contracción, una revelación animada o un panel con varias columnas, construya una versión personalizada, pero use <details>/<summary> como estructura subyacente si es posible. Añada ARIA solo si no puede utilizar los elementos nativos en absoluto.

Desactive JavaScript en DevTools y compruebe que el acordeón sigue funcionando: haga clic en summary, el panel cambia, el orden del foco sigue siendo lógico y el teclado lo activa. Si algo falla, JS no es una mejora, sino un requisito, lo que contradice el PE.

Para permitir que solo haya un elemento abierto a la vez, como en los botones de opción, sin JS, use el atributo name en <details> (compatible con Chrome/Safari): todos los elementos <details name="faq"> comparten el estado, de modo que al abrir uno se cierran los demás. Es un patrón de HTML puro que imita los botones de opción.

Sustituya divs+JS por <details>/<summary> y conserve las clases CSS para aplicar estilos. El resultado es un HTML más breve, sin dependencia de JS, con mejor accesibilidad y contenido indexable. La mayoría de los acordeones de JS pueden migrarse al PE con cambios mínimos visibles para el usuario.

Un acordeón con PE usa <details>/<summary> nativos como base: es totalmente accesible y se controla mediante el teclado sin JS. Añada CSS para los estilos visuales y, opcionalmente, JS para las animaciones o el comportamiento de apertura única. Compruebe, desactivando JS, que la funcionalidad básica sigue funcionando. El nuevo atributo name incluso permite un modo de apertura única solo con CSS.