«Persiana» o «acordeón»
Escondé un texto para que el usuario solo lo vea si hace clic en su título.
En esta página
Qué es la persiana
La etiqueta «details» de HTML5 es un recurso de semántica web y visual que nos permite mostrar dentro de un cuerpo de texto el título de un fragmento de información y dejar el resto oculto.
La información oculta solo se muestra (se despliega o abre la persiana) si el usuario hace clic en el título (etiqueta «summary» de HTML5).
Si luego el usuario hace clic en el título otra vez, el componente colapsa (se contrae o cierra la persiana).
Este el el título de la persiana
Esta es la información que se despliega después de que hiciste clic en el título y se oculta si volvés a hacer clic.
Como el recurso oculta información (la que está colapsada bajo el título), debés utilizarlo con cuidado para evitar que el usuario se pierda información importante.
Nosotros usamos el recurso en los contenidos de la sección «Temas y servicios»: en los títulos de las persianas de «Tránsito y transporte», por ejemplo, preguntamos al usuario las consultas más habituales según las analíticas web.
Al hacer clic en un título (que equivale a un «sí» de su parte) se le despliega la información que estaba buscando.
De este modo, reducimos el scroll y el usuario solo lee lo que efectivamente quiere.
Buenas y malas prácticas
Si tenés que presentar un contenido muy extenso, en lugar de este recurso usá las anclas, de modo que el contenido sea más navegable en cualquier dispositivo.
Si bien sugerimos evitar el uso de preguntas frecuentes (como explicamos en otra sección), la persiana puede resultarte útil en caso de armar unas FAQ con pocas preguntas. Para muchas preguntas frecuentes, en cambio, es preferible usar las anclas por el motivo que dijimos en el párrafo anterior.
Nunca uses este recurso para subtitular: la etiqueta «details» es completamente diferente a las etiquetas «h» de los subtítulos. Siempre pensá primero en semántica web (contenido bien estructurado), luego en el impacto visual.