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.
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.
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. |
Última actualización 1yr ago