Registerkarten in Onlinedokumentation – Tabs

Registerkarten bieten eine Möglichkeit, Informationen nach bestimmten Kategorien zu ordnen und jeweils nur eine dieser Kategorien anzuzeigen. Dies schafft Ordnung und reduziert die Menge der zu einem bestimmten Zeitpunkt sichtbaren Informationen. Dadurch entsteht weniger leicht ein Gefühl der Überforderung. Leser können sich besser auf das für sie Relevante konzentrieren.

Umsetzbar ist dies in einer Onlinedokumentation entweder rein mit den Mitteln von CSS oder mit einer Kombination von CSS und JavaScript.

Beispiel

Die folgende Lösung ist eine reine CSS-Lösung ohne den Einsatz von JavaScript. Wenn Sie das Browserfenster verkleinern, werden die Registerkarten zu einem Akkordeon. Probieren Sie es aus!
 

Implementierung

Die Lösung basiert im Kern auf einem Vorschlag von Louis Lazaris auf der Seite codeinwp. Sie verwendet intern eine Gruppe von Radio-Buttons, die nicht als solche erkennbar sind.

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

.csstabscontainer .csstabs {
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto 20px;
}
.csstabscontainer .radiotab {
  position: absolute;
  opacity: 0;
}
.csstabscontainer .label {
  width: 100%;
  padding: 12px 10px;
  cursor: pointer;
  font-weight: bold;
  font-size: 14px;
  text-align: center;
  border: solid 1px rgb(235,235,235);
}
.csstabscontainer .radiotab:checked + .label {
  background-color: rgb(247,247,247);
}
.csstabscontainer .panel {
  display: none;
  padding: 20px 30px 30px;
  width: 100%;
  background-color: rgb(247,247,247);
}
.csstabscontainer .radiotab:checked + .label + .panel {
  display: block;
}
@media (min-width: 600px) {
  .csstabscontainer .panel {
    order: 99;
  }
.csstabscontainer  .label {
    width: 150px;
    border: none;
  }
}

Schritt 2: Zusätzlich benötigen Sie ein HTML-Schnipsel vor und nach dem Inhalt jeder Registerkarte.

> Setzen Sie vor die erste Registerkarte das HTML-Schnipsel:

<div class="csstabscontainer">
 <div class="csstabs">
  <input class="radiotab" name="csstabs" type="radio" id="csstab1" checked="checked">
  <label class="label" for="csstab1">Responsive Tab 1</label>
  <div class="panel">

> Setzen Sie zwischen allen weiteren Registerkarten folgendes HTML-Schnipsel, wobei Sie die Werte für id="…" und für for="…" sowie den Text jeweils anpassen.

  </div>
  <input class="radiotab" name="csstabs" type="radio" id="csstab2">
  <label class="label" for="csstab2">Responsive Tab 2</label>
  <div class="panel">

> Setzen Sie nach die letzte Registerkarte folgendes HTML-Schnipsel:

  </div>
 </div>
</div>

Weitere Beispiele

In den meisten Fällen dürfte eine ein rein CSS-basierte Lösung wie in Beispiel 1 die beste und einfachste Möglichkeit sein. JavaScript-basierte Alternativen bieten z. B. die Bibliotheken vanilla-tabs oder Easy Responsive Tabs to Accordion. Die Ergebnisse sehen dann – je nach Styling – z. B. wie folgt aus. Zur Implementierung beachten Sie bitte die Hinweise in der Dokumentation zur jeweiligen Bibliothek.

Umsetzung mit vanilla-tabs:
 

• This is the content of tab 1.

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

  Anything can go here.

  

• This is the content of tab 2.

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

• This is the content of tab 3.

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

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

Umsetzung mit Tabs to Accordion: