Acordeón

Definición

Un acordeón es un conjunto de encabezados interactivos, que permiten desplegar y colapsar secciones de contenido.

Anatomía

Las partes del componente son:

1. Encabezado: contiene el título de la sección y el icono de despliegue. Todo el encabezado es interactivo, no solo el icono.
2. Icono de despliegue: Informa sobre qué sucederá al interactuar con el encabezado. Cuando el ángulo apunta hacia abajo, significa que el apartado está plegado (y se desplegará al interactuar con el encabezado); si el ángulo apunta hacia arriba, significa que el apartado está desplegado (y se plegará al interactuar con el encabezado).
3. Panel: Encuadra el contenido asociado con un encabezado de acordeón.

Tipos

Por defecto

Pautas de uso

Presenta el acordeón plegado por defecto

Al acceder a la página, todos los elementos del acordeón deben estar plegados. Excepcionalmente, puedes desplegar por defecto el primer encabezado si su contenido es relevante para la mayoría de visitantes.

Incluye un contenido breve y sencillo en los paneles

En los paneles plegables, incluye un contenido breve y sencillo en su estructura. No introduzcas en ellos interacciones complejas (buscadores, otro acordeón, etc.)

No incluyas información esencial dentro de los paneles, ya que no todos los usuarios los desplegarán.

Componentes relacionados

Similar a:

• Tabs
• Asistente de pasos

Forma parte de:

• Formularios
• Contenidos estructurados
• Contenidos no estructurados

Recursos asociados al componente

Implementación:

Storybook (solo accesible desde la RCJA)

Control de versiones