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

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

Toggle me, please

This content is hidden by default. Users only need to read it in case they decide to expand the toggle.

##### ##### ##### ### ##### ########### ########## ##### ### ## ###### ########## ######### ##### #### ###### ##### ##### ## ## ######### ########## ### #### ######### ##### ####### ######

Bridge the knowledge gap

Implementierung

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>

Haben Sie von diesen Informationen profitiert?

Vielleicht können Sie im Gegenzug auf diese Seite verlinken, erwähnen die Seite in sozialen Netzwerken oder erwerben eines meiner Bücher?

Vielen Dank!

Lust auf mehr? Siehe auch weitere Code-Schnipsel zum Aufwerten einer Onlinedokumentation sowie meine anderen Arbeitshilfen zur Technischen Dokumentation.