Acordeón

Se trata de un listado de elementos organizados verticalmente que permite mostrar y ocultar el contenido de dichos elementos. En general se usan para agrupar información que se consume por bloques, como preguntas frecuentes, detalles de un elemento, fases de un proceso, etc.

Anatomía #

• Título: Describe el contenido del acordeón.
• Subtítulo opcional: Puede incluir texto adicional para describir el contenido.
• Botón: ‘Mostrar/Ocultar’ que hace la acción de abrir y cerrar el contenido.
• Contenido: Es libre pudiendo incluir cualquier otro componentes.
• Líneas de separación: Para aislar el contenido entre acordeones.

Diferencias entre acordeón, contraíble, detalles e interruptor #

• Acordeón: Debe tener múltiples elementos relacionados entre sí, y tiene opciones para ajustar el comportamiento de cuando se abren o cierran al interactuar con uno de ellos.
• Contraíble: Es un solo elemento que se usa de manera aislada. Su uso es similar a un details pero el colapsible es un elemento con más peso visual y que necesita Javascript para funcionar.
• Detalles: Funciona como un colapsible pero es un elemento nativo de los navegadores, se recomienda su uso cuando el contenido no se quiere destacar especialmente.
• Interruptor: Funcionalmente nos permite activar o desactivar elementos u opciones, se pueden usar para mostrar funcionalidades más complejas como filtros, búsquedas avanzadas, etc.

Buenas prácticas #

• El título tienen que hacer referencia clara al contenido que del elemento.
• El contenido del acordeón no debe incluir interacciones muy complejas, como buscadores, otro acordeón, etc. para estos casos usar un toggle.
• Si hay más de 7 elementos se recomienda incluir un botón de desplegar todos que facilite la búsqueda de contenido. especialmente si el contenido está relacionado entre sí.
• Existe la posibilidad de que el elemento activo se cierre al abrir otro o que se mantenga abierto, esto dependerá del tipo de contenido que contenga.

• Cerrado automático: si el contenido es independiente entre si o si la información se va a consumir principalmente desde el móvil.
• Mantener elementos abiertos: si el contenido está relacionado entre sí, por ejemplo las fases de un proceso.