Nexus – Elemento: Accordion

¿Qué es?

El Accordion es un componente de tipo Layout (estructura). Muestra contenido organizado en secciones colapsables, cada una con un título y un contenido que se expande o contrae al hacer clic. Al arrastrarlo al lienzo, viene con 3 secciones de ejemplo precargadas (Section 1, Section 2, Section 3).

Propiedades

Al seleccionar el Accordion en el lienzo, el panel derecho muestra “Properties of Accordion” con las siguientes opciones:

• Component ID: identificador único del componente, autogenerado (ej. acc_d0ebb60d).
• Visibility → Hidden on load: casilla para que el Accordion esté oculto al cargar la pantalla. Puede mostrarse luego mediante una acción de tipo Show (ver Events & Actions).
• Sections (JSON): campo de código donde se define el contenido del Accordion en formato JSON. Cada sección se compone de:
  • title: título de la sección.
  • content: contenido/texto que se muestra al expandir la sección.
  • open: solo puede usarse en la primera sección del arreglo; agregarla en cualquier otra sección genera un error de validación del JSON.
  El editor valida el JSON en tiempo real (se ve la marca “✓ valid” cuando el formato es correcto).
• Behavior → Allow Multiple Open: casilla que define si se puede tener más de una sección abierta a la vez.
  • Desactivado: al abrir una sección, las demás se cierran automáticamente (solo una abierta a la vez).
  • Activado: permite tener todas las secciones abiertas al mismo tiempo, sin límite.
• Style → Custom Class: campo para asignar una clase CSS personalizada.
• Style → Custom Style: campo de texto para CSS personalizado aplicado directamente a este componente.
• Delete Component: elimina el Accordion del lienzo.
• Events & Actions: sistema para definir comportamientos interactivos. Ver documentación aparte: Nexus – Events & Actions.

Ejemplo de uso

Para agregar una nueva sección, se copia un bloque completo dentro del JSON de Sections (incluyendo la coma que lo separa del bloque anterior) y se modifican sus valores de title y content. Por ejemplo, para sumar una cuarta sección:

[
   {
    "title": "Section 4",
    "content": "Contenido de la sección 4"
   }
]

⚠️ Importante: la coma va pegada a la llave } del bloque anterior (el último que ya existía en el JSON), no al principio del bloque nuevo. Si el bloque anterior era el último de la lista, hay que agregarle esa coma antes de pegar el nuevo bloque debajo.

El Accordion no tiene límite de 3 secciones — se pueden agregar tantas como se necesite repitiendo este bloque.