Uso de a etiqueta details
Son etiquetas las cuales podemos compactar información con un menu desplegable.
¿Cómo funciona?
Como un elemento desplegable, para mas dinamismo.
Diseño
El diseño se vuelve mas complejo, ya que debes tener en cuenta dos a mas elementos. Como las etiquetas de este ejemplo: details - summary - p.
Composición
Tenemos el contenedor, que es details, su encabezado que se muestra de antemano: summary. Y un hijo, en este ejemplo es un parrafo.
Ejemplo con diseño diferente
En este hay diferentes tamaños. Y sin decorados: no tiene el triangulo por default y el parrado es más grande.
Details unidos
Este y los dos de abajo. Estan conectados por la propiedad de HTML 'name' lo que hace que solo pueda estar uno abierto.
Ademas de que este elemento esta abierto desde el inicio por otra propiedad 'open'.
Algo a tener en cuenta, es que a la fecha de hoy (20/3/24), no todos los navegadores soportan esta opcion.
Details unidos
Elemento numero 2.
Details unidos
Elemento numero 3.