Dios bendiga el <details> elemento. Agregue algo de contenido y tendrá una interacción accesible de expansión para más con casi cero trabajo.
Consulte los detalles de Pen Simple. por Chris Coyier (@chriscoyier) en CodePen.
Lanzar un <summary> allí para personalizar lo que dice el texto de expansión.
Consulte el resumen / detalles de Pen Multiple de Chris Coyier (@chriscoyier) en CodePen.
Funciona muy bien para las preguntas frecuentes.
Realmente no hay límite para cómo puedes diseñarlos. Si no le gusta el anillo de enfoque predeterminado, puede eliminarlo, pero asegúrese de volver a colocar algún tipo de estilo.
Aquí he usado un elemento de encabezado para cada sección expandible, que tiene un estado de enfoque que imita otros elementos interactivos en la página.
El único navegador que no admite esto son los de Microsoft (y Opera Mini, lo cual tiene sentido, en realidad no es interactivo).
Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión y posteriores.
Escritorio
| Cromo | Firefox | ES DECIR | Borde | Safari |
|---|---|---|---|---|
| 12 | 49 | No | 79 | 6 |
Móvil / Tableta
| Android Chrome | Android Firefox | Androide | Safari de iOS |
|---|---|---|---|
| 96 | 94 | 4 | 6.0-6.1 |
Pero incluso entonces, es como si todas las secciones estuvieran abiertas, por lo que no es un gran problema:
¿Quieres diseñar ese triángulo predeterminado? Curiosamente, la forma estándar de hacerlo es a través de las propiedades de estilo de lista. Pero los navegadores basados en Blink no se han puesto al día con eso todavía, por lo que tienen una forma patentada de hacerlo. Sin embargo, se pueden combinar. Aquí hay un ejemplo de cómo reemplazarlo con una imagen:
summary {
list-style-image: url(right-arrow.svg);
}
summary::-webkit-details-marker {
background: url(right-arrow.svg);
color: transparent;
}Consulte los marcadores personalizados de lápiz en Detalles / resumen de Chris Coyier (@chriscoyier) en CodePen.
Desafortunadamente, no giran y tampoco hay forma de animar el triángulo predeterminado. Una idea podría ser apuntar a :focus Estado e intercambio de fondos:
Consulte los marcadores personalizados de lápiz en Detalles / resumen de Geoff Graham (@geoffgraham) en CodePen.
Pero eso parece estar limitado a WebKit y Blink e, incluso entonces, la flecha volverá una vez que el elemento esté desenfocado, incluso si el elemento aún está expandido.