details/summary Akkordion mit dem Inhaltselement Elementgruppe

Moin,

Ich wollte ein eigenes Inhaltselement haben, mit dem man die HTML-Elemente details und summary in Contao verwenden kann, weil ich ein Akkordeon-Element ganz ohne JavaScript haben wollte.
Der einfachste Weg war für ein angepasstes Template für das Inhaltselement Elementgruppe.

Ich habe im Template Studio eine Variante von content_element/elementgroup mit dem Namen details erstellt:

Code:

---

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

{% set attributes = attrs()
    .addClass('content-element-details')
%}

{%- block inner %}
<details name="{{ data.title }}">
    {% if headline.text %}
    <summary>
        {% block headline_inner %}
            {{ parent() }}
        {% endblock %}
    </summary>
    {% endif %}
  {% block content %}
        {% for fragment in nested_fragments %}
            {{ content_element(fragment) }}
        {% endfor %}
    {% endblock %}
</details>
{% endblock -%}

---

Erläuterung:

• Das name="{{ data.title }}" sorgt dafür, dass der Titel der Elementgruppe als name Attribut für details verwendet wird. Bei allen details-Elementen mit gleichem name Attribut kann immer nur eins zur Zeit geöffnet sein.
• Die Überschrift aus der Elementgruppe kommt in den summary-Tag, wobei ich den Block headline_inner genommen habe, damit die Überschrift ohne h-Tag ausgegben wird (laut https://developer.mozilla.org/en-US/...ements/summary kann es mit h-Tag zu accessibility issues kommen).
• Die Inhaltselemente innerhalb der Elementgruppe bilden dann den Inhalt des details/summary Akkordeons
• Das Wrapper-div kriegt noch zusätzlich die CSS-Klasse "content-element-details"

Als Twig-Anfänger weiß ich nicht, ob das ggf. eleganter geht. Falls ja, bin ich dankbar für Hinweise/Verbesserungen.

Verwendung:

• Inhaltselement 'Elementgruppe' erstellen, bei den Templateeinstellungen das angepasste Template wählen
• Innerhalb der Elementgruppe die Inhaltselemente erstellen, die Inhalt des Akkordeons sein sollen
• fertig ist ein Akkordeon-Element.

Lässt sich mit CSS ganz gut stylen.

Showcase: https://test.mathiasdoll.de/


Gruß
Mathias