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.

Última actualización 1yr ago

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.

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.

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.

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.