Aufklappbare Abschnitte in Onlinedokumentation – Dropdowns, Toggles

Nicht alle Inhalte von Beginn an im Detail zu zeigen, kann sogar ein langes Topic sehr übersichtlich machen. Viele Redaktionssysteme bieten hierfür bereits eingebaute Funktionen unter Bezeichnungen wie „Dropdowns“, „Toggles“, „Collapsibles“ oder Ähnlichem an. Aber auch wenn es Ihr Redaktionssystem nicht explizit unterstützt, ist so etwas in einer Onlinedokumentation umsetzbar – sogar ohne den Einsatz von JavaScript.

Tipp: Auch in einem Tutorial sind solche Dropdowns oder Toggles praktisch, um die Antworten auf Kontrollfragen zunächst zu verbergen.

Beispiel 1

Diese Lösung verwendet das eigens zum Verbergen von Inhalten geschaffene HTML-Element <details>. Probieren Sie es aus und klicken Sie auf das Toggle:
 

Implementierung zu Beispiel 1

Schritt 1: Ergänzen Sie folgenden CSS-Code in der von Ihrer Onlinedokumentation verwendeten CSS-Datei oder im Head-Abschnitt Ihrer Seitenvorlage:

summary {
  font-size: 18px;
  font-weight: 700;
  cursor:pointer;
  outline: none;
  margin-bottom: 20px;
}
	
summary::marker {
  content:  " + "; 
  color: #006699;
  font-size: 1em;
  font-weight: bold;
  transition: all 0.5s;  
}
	
details[open] summary::marker {
  content:  " – ";
  color: #006699;
}

Die hierin enthaltenen Styles definieren das Aussehen des anklickbaren Texts.

Anmerkung: Wenn Sie die beiden Einträge zu summary::marker weglassen, verwendet der Browser des Nutzers voreingestelltes Symbol (normalerweise ein ausgefülltes Dreieck in Textfarbe).

Schritt 2: Umschließen Sie mit den folgenden beiden HTML-Schnipseln den bei der Anzeige zunächst verborgenen Inhalt:

<details>
 <summary>Toggle me, please</summary>

</details>

Beispiel 2

Für eine gruppenweise Darstellung eignet sich z. B. auch folgende Formatierung. Das Einblenden ist dezent animiert. Zudem rotiert beim Einblenden das Plus-Zeichen und wird dabei zu einem x.

Implementierung zu Beispiel 2

In diesem Fall ersetzen Sie den CSS-Code aus Beispiel 1 durch folgenden Code:

details[open] summary ~ * {
 animation: open 0.5s ease-in-out;
}
@keyframes open {
 0% {opacity: 0;}
 100% {opacity: 1;}
}
details summary::-webkit-details-marker {
 display: none;
}
details summary {
 width: 100%;
 padding: 0.5rem 0;
 border-top: 1px solid black;
 position: relative;
 cursor: pointer;
 font-size: 1.20rem;
 font-weight: 300;
 list-style: none;
}
details summary:after {
 content: "+";
 color: black;
 position: absolute;
 font-size: 1.60rem;
 line-height: 0;
 margin-top: 0.75rem;
 right: 0;
 font-weight: 200;
 transform-origin: center;
 transition: 500ms linear;
}
details[open] summary:after {
 transform: rotate(45deg);
 font-size: 1.80rem;
}
details summary {
 outline: 0;
}
details[open] {
 margin-bottom: 30px;
}