Accordion 1

Here goes your text

Lorem ipsum dolor ist amte, consectetuer adipiscing eilt. Aenean commodo ligula egget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quak felis, ultricies nec, pellentesque eu, pretium quid, sem.

I am a button

Accordion 2

Here goes your text

Lorem ipsum dolor ist amte, consectetuer adipiscing eilt. Aenean commodo ligula egget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quak felis, ultricies nec, pellentesque eu, pretium quid, sem.

I am a button

Accordion 3

Here goes your text

Lorem ipsum dolor ist amte, consectetuer adipiscing eilt. Aenean commodo ligula egget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quak felis, ultricies nec, pellentesque eu, pretium quid, sem.

I am a button

Accordion 4

Here goes your text

Lorem ipsum dolor ist amte, consectetuer adipiscing eilt. Aenean commodo ligula egget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quak felis, ultricies nec, pellentesque eu, pretium quid, sem.

I am a button

<script>

// Función para observar cambios en el DOM y asignar aria-expanded y aria-controls
function observeAccordionItems() {
  const accordionItems = document.querySelectorAll('.fb-accordion-four__item');

  // Crea un nuevo observador
  const observer = new MutationObserver(mutationsList => {
    mutationsList.forEach(mutation => {
      const item = mutation.target;
      const button = item.querySelector('.fb-accordion-four__title');
      const isOpen = item.classList.contains('brx-open');

      // Asigna el atributo 'aria-expanded' en función del estado
      button.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
    });
  });

  // Observa cambios en los atributos de clase de los elementos del acordeón
  accordionItems.forEach((item, index) => {
    const button = item.querySelector('.fb-accordion-four__title');
    const controlId = `sect${index + 1}`;

    // Asigna el atributo 'aria-controls' con valores únicos
    button.setAttribute('aria-controls', controlId);

    // Inicialmente, verifica si el elemento tiene la clase 'brx-open' y actualiza aria-expanded
    const isOpen = item.classList.contains('brx-open');
    button.setAttribute('aria-expanded', isOpen ? 'true' : 'false');

    // Observa cambios en los atributos de clase de los elementos del acordeón
    observer.observe(item, { attributes: true, attributeFilter: ['class'] });
  });
}

// Llama a la función para comenzar a observar cambios
observeAccordionItems();


</script>