Componente Accordion

El componente Acordeón permite crear una colección de componentes, compuesta por paneles, con la capacidad de contraer o expandir estos paneles. Los elementos dentro de los paneles son configurables.

Utilización

Para organizar información relacionada.

Puede utilizarse para agrupar u ocultar contenidos con el fin de mantener la interfaz limpia y reducir el desorden.

Consejos de accesibilidad

El título debe ser lo más breve posible sin dejar de ser claro y descriptivo.

Las etiquetas de título deben escribirse en mayúsculas para la primera palabra. No es aconsejable escribir la etiqueta del título en mayúsculas, ya que esto dificulta su lectura.

Puede configurar el panel del primer acordeón para que se abra por defecto o no.

Elementos componentes a configurar en EHE

• Añadir/eliminar/reorganizar elementos
• ID
  
• Expansión de un solo elemento
• Elemento expandido
• Elemento de título
• Cambiar el tamaño del título 

Configuración

Abra el cuadro de diálogo Configurar del componente.

Pestaña Elementos

Cambiar el nombre de los elementos, eliminar elementos, reorganizar elementos, añadir elementos

Los dos primeros elementos se añaden por defecto; puede cambiar sus nombres, o eliminar uno sobrante.

Para cambiar la disposición de los elementos, arrastre el icono de reordenar hacia arriba o hacia abajo.

Utilice el botón Añadir para abrir el selector de componentes y elija el componente Contenedor.

ID

Puede añadir un ID a cada elemento. Le permite utilizar enlaces de anclaje para navegar directamente al elemento del acordeón seleccionado. Si no se especifica un ID, se generará automáticamente. Sin embargo, tenga en cuenta que los ID generados automáticamente pueden cambiar si se realiza algún cambio en el componente.

Pestaña Propiedades

• Expansión de un solo elemento

Al seleccionar esta opción, sólo se expandirá un elemento a la vez. Al expandir un elemento, todos los demás se contraerán.

• Elemento expandido

Seleccione los elementos que desea expandir.

• Elemento de encabezado

Seleccione el nivel de encabezado para las etiquetas de los elementos.

• Cambiar tamaño de título

Marque esta casilla para asegurarse de que el cambio del nivel de encabezamiento también afectará al tamaño de fuente de las etiquetas de los elementos. Esto puede ser beneficioso desde una perspectiva SEO.

Estilos personalizados del componente

Abra el cuadro de diálogo Estilos personalizados del componente.

1. Marque la casilla Habilitar estilos personalizados y haga clic en uno de los Estados para mostrar las opciones disponibles. 

2. Configure el fondo, el borde y el color del texto.