Acordeón

Un acordeón es una lista de titulares apilados en posición vertical que permiten la posibilidad de visualizar u ocultar contenido relacionado con el encabezado.

Racional de aplicación

Usamos el componente acordeón para mostrar información extra o descripciones generales de contenido relacionado con el encabezado que las preside, permitiendo así decidir entre un listado de sección y leer más en profundidad. Se recomienda usar estos grupos de secciones para mostrar información complementaria a la página donde se ubique. También en los siguientes casos:

• Organizar información no vital.

• Acortar la longitud y scroll de una página con demasiada información.

• Preguntas y respuestas frecuentes (FAQ).

Tengamos en cuenta que el componente acordeón por defecto oculta el contenido de las secciones por lo que no debemos usar este componente cuando dicha información es importante y vital que se deba saber o tener conocimiento de ella. Del mismo modo, no es recomendable, cuando el texto adicional sea extendido y perjudique la legibilidad o experiencia del usuario.

Buenas prácticas

Uso correcto	Uso incorrecto
Procuramos mostrar información no demasiado extensa para que las secciones sean fáciles de leer y comprender.	Un contenido extenso dentro de una sección se convierte en una mala experiencia de usuario.

Interacción

Dispositivo	Interacción
Ratón	Se puede abrir o cerrar un Acordeón haciendo clic en cualquier lugar dentro del contenedor del titular.
Teclado	Se puede desplegar el contenido de sección de un acordeón presionando la tecla Intro o Espacio mientras la sección está enfocada.

Anatomía y variabilidad

Anatomía del componente

Letra	Elemento	Descripción
A	Etiqueta de sección	Ofrece información sobre el contenido que va a desplegar.
B	Separador	Delimita las secciones dentro del componente.
C	Icono de apertura	Indica si la sección de información ha sido desplegada (-) o está colapsada (+).
D	Contenedor	Agrupa a todos los elementos fijos de la sección
E	Desplegable	Contenedor que engloba toda la información de la sección.
F	Contenido	Información que contiene el elemento desplegable al activar una sección.

Variabilidad de estados

Letra	Estado	Descripción
A	Default	Estado por defecto, la sección no está desplegada.
B	Hover	Visible al posicionar el cursor del mouse encima de una sección.
C	Active	La sección ha sido clicada y el contenido oculta se despliega.
D	Disabled	Estado no disponible, la sección no puede ser desplegada.