> ## Documentation Index
> Fetch the complete documentation index at: https://docs.xquiz.com.br/llms.txt
> Use this file to discover all available pages before exploring further.

# Acordeón

> Elemento expandible para organizar contenido en secciones colapsables

<img style={{ borderRadius: "0.5rem" }} src="https://mintcdn.com/xquiz-12076fbf/DabTafNhExNz5i1G/images/accordion-v3.png?fit=max&auto=format&n=DabTafNhExNz5i1G&q=85&s=cf0ac22276841da26b023317a2bd3b99" width="1014" height="635" data-path="images/accordion-v3.png" />

El elemento Acordeón sirve para organizar información en secciones expandibles y colapsables, permitiendo que los usuarios vean solo el contenido que desean, manteniendo la interfaz limpia y organizada.

**Para qué sirve**

* Organizar información en secciones colapsables para ahorrar espacio.

* Crear FAQs (Preguntas Frecuentes) interactivas.

* Presentar contenido detallado de forma organizada y accesible.

* Mejorar la experiencia del usuario con navegación intuitiva.

* Reducir la sobrecarga visual manteniendo información importante accesible.

**Qué puedes configurar**

**Modo de Apertura:**

* **Único:** Solo un elemento puede estar abierto a la vez (comportamiento por defecto).

* **Múltiple:** Varios elementos pueden estar abiertos simultáneamente.

**Contenido de los Elementos:**

* **Título:** Texto principal de cada sección con formato enriquecido (negrita, cursiva, colores, etc.).

* **Descripción:** Contenido detallado de cada sección con editor completo de texto.

* **Variables:** Inserta variables dinámicas tanto en el título como en la descripción.

**Configuraciones de Contenido:**

* **Mínimo:** 1 elemento obligatorio.

* **Máximo:** 10 elementos por acordeón.

* **Formato:** Editor completo con barra de herramientas para formato avanzado.

**Estilos Visuales:**

* **Borde:** Color de las líneas separadoras entre elementos.

* **Título:** Color personalizado para el texto del título de cada elemento.

* **Descripción:** Color personalizado para el contenido de la descripción.

* **Icono:** Color del icono de expansión/colapso.

**Animaciones:**

* **Transición:** Animación suave al abrir y cerrar los elementos.

* **Icono:** Rotación del icono indicando el estado (abierto/cerrado).

**Interactividad:**

* **Hover:** Efecto de subrayado al pasar el mouse sobre el título.

* **Clic:** Expansión/colapso del contenido al hacer clic en el título.

**¡Consejo de uso!**

Usa acordeones para organizar información compleja de forma clara y accesible. Mantén los títulos concisos y descriptivos, y organiza el contenido de forma lógica. Evita crear demasiados elementos (máximo 5-7) para no sobrecargar al usuario. Usa el modo "Único" para FAQs y el modo "Múltiple" cuando el usuario necesita comparar información entre diferentes secciones.
