Handorgel - Accordion - alle Elemente geöffnet laden

[derRenner]

Mit folgender Anpassung werden alle Accordion-Element geöffnet geladen und dargestellt.
Das manuelle Öffnen und Schliessen ist weiterhin möglich

{# /templates/content_element/accordion/all-open.html.twig #}

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

{% block element_content %}
    {% set accordion_content_attributes = attrs()
        .addClass('handorgel__content')
        .set('data-open', element.is_open ? 'true' : 'false')  
        .mergeWith(accordion_content_attributes|default)
    %}
    <div{{ accordion_content_attributes }}>
        {% set accordion_content_inner_attributes = attrs()
            .addClass('handorgel__content__inner')
            .mergeWith(accordion_content_inner_attributes|default)
        %}
        <div{{ accordion_content_inner_attributes }}>
            {{ content_element(element.reference) }}
        </div>
    </div>
{% endblock %}

{% block init_options %}
    multiSelectable: true,
    {# Put custom options here #}
{% endblock %} 

[Himbeerrot]

Vielen Dank!

Würdest du bitte auch die Variante posten, mit der man alle Elemente geschlossen lädt?

Herzliche Grüße
Holger

[lbableck]

Das geht standardmäßig schon mit der Option "Alle Bereiche schließen" im Akkordeon-Element. Dafür braucht es kein angepasstes Template.

[Himbeerrot]

Danke schön!
Wieder was gelernt :-)

[vienneva]

Hi,

ich würde das gerne verwenden aber in einem verschachtelten Akkordeon. Die inneren Akkordeons sollen dann gleich geöffnet sein, wenn das umschließende Akkordeon geöffnet wird.
Leider klappen die Inneren nicht auf, weil das div.handorgel__content noch ein inline style="height:0px" hat. Wie passe ich das am besten an?

Liebe Grüße
Eva

[zoglo]

Hi,

ich würde das gerne verwenden aber in einem verschachtelten Akkordeon. Die inneren Akkordeons sollen dann gleich geöffnet sein, wenn das umschließende Akkordeon geöffnet wird.
Leider klappen die Inneren nicht auf, weil das div.handorgel__content noch ein inline style="height=0px" hat. Wie passe ich das am besten an?

Liebe Grüße
Eva

Mit einem EventListener auf dem Parent, dann müsstest du durch die inneren iterieren und hier die Handorgel folds öffnen. Ein Beispiel wäre hier:
https://github.com/oncode/handorgel/issues/11

Aber ob das alles so klappt mit dem Schließen, musst du auch austesten, dazu gibt es ein Issue:
https://github.com/oncode/handorgel/issues/35