details y summary: Contraer y expandir con HTML5
Contraer y expandir elementos es algo muy simple que podemos hacer con JavaScript y hay decenas de métodos; incluso librerías como jQuery poseen funciones específicas que incluyen efectos y animaciones ¿por qué jamas existió una etiqueta específica para eso? NO tengo idea pero, el HTML5 lo ha resuelto aunque aún no terminan de implementarse en algunos dispositivos.
Las etiquetas details y summary se utilizan combinadas para generar una sección interactiva que el usuario pueda abrir o cerrar. Un ejemplo básico:
<details> <summary>detalles a ver</summary> ....... cualquier contenido ....... </details>
expandir/contraer detalles
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero.
El texto visible que sirve de enlace para desplegar y contraer se coloca en summary y todo lo que lo que sigue es lo que se ocultará hasta tanto se haga click. Ese contenido que por defecto no es visible, puede ser cualquier cosa.
ver/ocultar imagen
La etiqueta details admite todos los atributos generales de cualquier otra y además, posee dos que son específicos:
ontoggle ejecuta una función JavaScript cuando se abre o cierra
open indica que el contenido es visible inicialmente
ejemplo toggle
este texto es visible por defecto
Podemos usar CSS para personalizar su apariencia, incluyendo el carácter que se define como marca si establecemos la propiedad display con el valor block:
summary {
color: #34b3a0;
cursor: pointer;
display: block;
font-weight: bold;
}
summary::before {
color: #34b3a0;
content: "\25BC";
font-size: 24px;
padding-right: .1em;
vertical-align: text-top;
}
details[open] summary::before {
content: "\25B2";
}
ejemplo CSS personalizado
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Como cualquier etiqueta, puede anidarse así que nada impide transformarla, por ejemplo, en algo parecido a un menú:
<details> <summary>ejemplo anidado</summary> <details> <summary>primero</summary> ....... contenido ....... </details> <details> <summary>segundo</summary> ....... contenido ....... </details> </details>
