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