Saltar al contenido

details y summary: acordeones sin una línea de JavaScript

Mario P.

Nivel 3 ·

Necesitaba una sección de preguntas frecuentes desplegables y la resolví con details y summary. Cero JS, accesible y funciona con teclado. Y me enteré de que ahora, con el atributo name, se puede hacer que al abrir uno se cierren los demás.
825 vistas 4 respuestas 1 0

Respuestas 4

  1. Ana R.

    Nivel 3 ·

    0 0

    Sí, lo del atributo name compartido para acordeones exclusivos ya está en los navegadores principales. Antes había que hacerlo con JS.

  2. Jefferson Z.

    Nivel 3 ·

    0 0

    Otro detalle lindo: en algunos navegadores, la búsqueda de la página (Ctrl+F) encuentra texto dentro de un details cerrado y lo abre solo.

  3. Sebastián

    Nivel 3 ·

    0 0

    Para estilizar el triangulito: summary::marker o list-style en el summary. Todavía hay alguna diferencia entre navegadores.

  4. Carolina F.

    Nivel 3 ·

    0 0

    Excelente para FAQ. La gente reinventa esto con 50 líneas de JS sin necesidad.