SELFHTML Weblog - Ergänzung zur Dokumentation Übersicht

1. Summary - aber wie Stylen?

Ein summary-Element erhält defaultmäßig ein dreieckiges Symbol in Textfarbe, dass beim Anklicken und Aufklappen seine Richtung ändert.

Dieses Symbol ist ein Pseudoelement, dass sich in den meisten Browsern über den ::marker-Selektor formatieren lässt, aber eben nicht in allen:

summary::-webkit-details-marker,	
summary::marker {
  content:  " ↓ "; /* "Pfeil"-Symbols anstelle des Dreiecks */
  color: green;
  font-size: 2em;
  font-weight: bold;
  transition: all 0.5s;  
}	

details[open] > summary::-webkit-details-marker,
details[open] > summary::marker {
  content:  " ↑ ";
  color: red;
}

Für den Safari benötigt man – zumindest für die content-Eigenschaft – im Jahre 2026 immer noch den proprietären Präfix -webkit-

Oft ist es besser den Marker auszublenden und durch ein anderes – frei stylebares Pseudoelement zu ersetzen:

2. Aufklappen oder sanft ausfahren?

Beim Aufklappen eines details-Elements gab es weitere CSS-Probleme: Der zu öffnende Inhalt konnte nur durch ein zusätzliches wrapper-div unabhängig vom summary-Element gestaltet werden. Dies ist mit dem neuen ::details-content-Selektor mittlerweile in allen Browsern möglich.

Beim Aufklappen war kein weicher Übergang in Form eines langsamen Aufschieben möglich.

details .content {
  height: 0;
}

details[open]  .content {
  height:  100%;
}

Dies scheitert aus einem einfachen Grund:

• Prozentwerte bei height beziehen sich immer auf die Höhe des Elternelements
• In diesem Fall hat das Elternelement (details) aber keine feste Höhe
  → Der Browser kann 100% nicht berechnen, weil es keine feste Referenz gibt.

In den früheren Fassungen unseres Tutorials gab es Ansätze, wie man mit JavaScript die tatsächliche Höhe des Inhalts ermittelt. Alternativ musste man das händisch ermitteln und als Magic number ins CSS schreiben - immer mit der Gefahr, dass der Wert irgendwann mal nicht passt.

details::details-content {
  height: 0;
  overflow-y: clip;
  transition: 1s allow-discrete;
}

details[open]::details-content {
	height: 15em;
  height: calc-size(auto, size);
}

Die neue CSS-Funktion calc-size() löst dieses Problem; allerdings noch nicht im Firefox und Safari.
😟

3. Exklusives Akkordion

Kann man mit reinem HTML mehrere details-Element so koppeln, dass sich beim Aufklappen eines Elements die anderen shcließen?

Ja, mit dem von Radio-buttons bekannten name-Attribut ist dies in allen Browsern möglich! Ganz ohne einsatz von JavaSript!

Jetzt endlich kann man details endlich uneingeschränkt nutzen!

• Akkordeon mit details

BTW

Divi, ein Pagebuilder für Wordpress löst das so:

<div class="et_pb_module et_pb_accordion et_pb_accordion_0 custom_toggle_styling">				
  <div class="et_pb_toggle et_pb_module et_pb_accordion_item et_pb_accordion_item_0 et_pb_toggle_close">
    <h5 class="et_pb_toggle_title">...</h5>
    <div class="et_pb_toggle_content clearfix">
      <p>...</p>
    </div>
  </div>
</div>

Mir fehlen die Worte.