Mehrer Artikel mit je nur einem Akkordeon in Contao 5.3

Hallo Leute,

Ich habe in Contao 5.3 auf einer Seite mehrere Artikel angelegt.
Pro Artikel ist ein einzelnes Akkordeon enthalten.

Wenn im Frontend ein Akkordeon geöffnet wird / aufklappt, und man ein weiteres Akkordeon öffnet, dann bleibt das schon geöffnete Akkordenen aufgeklappt und schließt sich nicht automatisch. Somit sind dann zwei Akkordeons aufklappt.

Wie kann man das so lösen, daß immer nur ein Akkordeon aufklappt? Also beim Öffnen eine weiteren Akkordeon das bisher geöffnete automatisch schließt?

Hier die Beispielseite

Kann das Beispiel nicht öffnen, da es ewig lange bei mir lädt (Mobiles Netz und in der Bahn, Seite womöglich nicht optimiert für mobile).

Laut Readme kannst du aber auf die Instanzen zugreifen und auf allen einem Eventlistener auf dem Fold registrieren. Entsprechend schließt du dann alle anderen sich auf der Seite befindlichen Instanzen / Handorgel-accordions:
https://github.com/oncode/handorgel

einen ähnlichen Anwendungsfall hatte ich mal in einem Projekt (... das Projekt ist leider nicht mehr öffentlich zugänglich)
Schau mal, ob du hiermit dein Auslangen findest.

Soweit ich mich aber erinnern kann, hat das auch Einfluss auf die anderen angelegten Akkordeons, sodass ich das dann projektweit gleich direkt über die /templates/content_element/accordion.html.twig laufen liess.

PHP-Code:

---

{% extends "@Contao/content_element/accordion.html.twig" %}

{% block script %}
  {% add "handorgel_js" to body %}
    {% set script_attributes = attrs()
      .setIfExists('nonce', csp_nonce('script-src'))
      .mergeWith(script_attributes|default)
    %}
    <script src="{{ asset('js/handorgel.min.js', 'contao-components/handorgel') }}"></script>
    <script{{ script_attributes }}>
      (function () {
        const instances = [];

        document.querySelectorAll('.content-accordion').forEach((el) => {
          const acc = new handorgel(el, {
            {% block init_options %}
              multiSelectable: false,
              {# Put custom options here #}
            {% endblock %}
          });

          instances.push(acc);

          acc.on('fold:open', () => {
            instances.forEach((other) => {
              if (other === acc) return;
              other.folds.forEach((f) => f.close());
            });
          });
        });
      })();
    </script>
  {% endadd %}
{% endblock %} 


---