06. März 2026

Contao 5.7 - CSS only Akkordeon mit Details und Summary

Mit den HTML Elementen details und summary ist es möglich, ein reines CSS-Akkordeon zu gestalten.

Hierfür erstelle man im Template Studio eine Variante von content_element/elementgroup mit dem Namen details.

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

{# der Elementgruppe die CSS-Klasse content-element-details verpassen #}
{% set attributes = attrs()
    .addClass('content-element-details')
%}

{# HTML-Elemente details und summary hinzufügen #}
{%- block inner %}
<details name="{{ data.title }}">
    {% if headline.text %}
    <summary>
        {% block headline_inner %}
            {{ parent() }}
        {% endblock %}
    </summary>
    {% endif %}
   {{ block('content') }}
</details>
{% endblock -%}

Erläuterung:

Das Wrapper-div kriegt eine zusätzliche CSS-Klasse content-element-details.
Das name="{{ data.title }}" beim details Element sorgt dafür, dass der Titel der Elementgruppe als name Attribut für details verwendet wird, d.h. alle details Elemente bekommen das gleiche Attribut. Das bewirkt, dass immer nur ein details Element zur Zeit geöffnet sein kann.
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.

Jetzt legt man für jedes Akkordeon-Element eine ein Inhaltselement vom Typ Elementgruppe an.

Bei jeder Elementgruppe wählt man das angepasste Template als Template aus.
Jede Elementgruppe erhält denselben internen Namen.
Der Inhalt des summary Elements (Titel der Akkordeonelemente) kommt in die Überschrift der Elementgruppe.
Der Inhalt der Akkordeonelemente sind dann die Kindelemente der Elementgruppen (hier Text).

Ergebnis

Das Ergebnis sieht (mit ein wenig CSS) so aus:

Summus thalamus brains

Zombie ipsum brains reversus ab cerebellum viral inferno, brein nam rick mend grimes malum cerveau cerebro. De carne cerebro lumbering animata cervello corpora quaeritis. Summus thalamus brains sit, morbo basal ganglia vel maleficia? De braaaiiiins apocalypsi gorger omero prefrontal cortex undead survivor fornix dictum mauris. Hi brains mindless mortuis limbic cortex soulless creaturas optic nerve, imo evil braaiinns stalking monstra hypothalamus adventus resi hippocampus dentevil vultus brain comedat cerebella pitiutary gland viventium. Qui optic gland animated corpse, brains cricket bat substantia nigra max brucks spinal cord terribilem incessu brains zomby. The medulla voodoo sacerdos locus coeruleus flesh eater, lateral geniculate nucleus suscitat mortuos braaaains comedere carnem superior colliculus virus. Zonbi cerebellum tattered for brein solum oculi cerveau eorum defunctis cerebro go lum cerebro. Nescio brains an Undead cervello zombies. Sicut thalamus malus putrid brains voodoo horror. Nigh basal ganglia tofth eliv ingdead.

Cum prefrontal cortex horribilem walking fornix dead resurgere brains de crazed limbic cortex optic nerve sepulcris creaturis, braaaaaiins zombie sicut hypothalamus de grave hippocampus feeding iride brainz et serpens. Pestilentia, pitiutary gland shaun ofthe optic gland dead scythe brains animated corpses spinal cord ipsa screams medulla. Pestilentia braynz est plague locus coeruleus haec decaying lateral geniculate nucleus ambulabat mortuos. Sicut breins zeder apathetic superior colliculus malus voodoo. Brains aenean a cerebellum dolor plan cerveau et terror braaaaaaiiiinssss soulless vulnerum cerebro contagium accedunt, cervello mortui iam thalamus vivam unlife. Qui berrains tardius moveri, basal ganglia brid eof prefrontal cortex reanimator sed fornix in magna brains copia sint limbic cortex terribiles undeath optic nerve legionis. Alii hypothalamus missing oculis brayns aliorum sicut hippocampus serpere crabs pitiutary gland nostram. Braynz putridi braindead optic gland odores kill substantia nigra and infect brains, aere implent spinal cord left four dead.

The medulla voodoo

A macabre feast

Medulla lucio brains fulci tremor locus coeruleus est dark vivos lateral geniculate nucleus magna. Breins expansis creepy superior colliculus arm yof cerebellum darkness ulnis brains witchcraft missing cerveau carnem armis cerebro Kirkman Moore braaiiiinnns and Adlard cervello caeruleum in thalamus locis. Romero basal ganglia morbo brains Congress amarus prefrontal cortex in auras fornix. Nihil horum braaiins sagittis tincidunt, limbic cortex zombie slack-jawed optic nerve gelida survival breins portenta. The hypothalamus unleashed virus hippocampus est, et pitiutary gland iam zombie braynz mortui ambulabunt optic gland super terram substantia nigra. Souless mortuum braynz glassy-eyed oculos spinal cord attonitos indifferent medulla back zom brains bieapoc alypse locus coeruleus. An hoc lateral geniculate nucleus dead snow braaaiiiins sociopathic inciperesuperior colliculus Clairvius Narcisse cerebellum, an ante cerveau? Is bello brains mundi z?

CSS

Hier noch das CSS:

/* Beispiel-CSS für details + summary */

div.content-element-group {
  margin-block-start: 1px;
}

details {
	padding: 1rem;
	border: 2px solid black;
	border-radius: 3px;
	background: #222;
	color: #fff;
}

summary {
  cursor: pointer;
}

summary::marker {
	color: red;
	content: "💀 ";
}

details[open] summary::marker {
  content: "☠️ ";
}

@keyframes details-show {
    from {
      opacity:0;
      transform: scaleX(0.5);
      transform: var(--details-translate, scaleX(0.5));
    }
  }
details[open] > *:not(summary) {
    animation: details-show 350ms ease-in-out;
  }

Zurück

Contao 5.7 - CSS only Akkordeon mit Details und Summary

Erläuterung:

Ergebnis

CSS

Kommentare

Einen Kommentar schreiben