Akkordeon oder Tabs in Beschreibungstexten

Mit Tabs oder einem Akkordeon strukturieren Sie längere Beschreibungstexte in einem Angebot. Teilnehmende müssen dann nicht durch einen langen Text scrollen, sondern können gezielt Informationen wie Übersicht, Programm, Voraussetzungen oder Zusatzangaben öffnen.

Die Elemente werden im Beschreibungseditor über die Quelltextansicht eingefügt. Testen Sie die Darstellung anschliessend immer in der Vorschau, weil Design, Website-Einbindung und Bildschirmgrösse beeinflussen können, wie Tabs oder Akkordeons wirken.

Wann Tabs oder Akkordeons sinnvoll sind

Tabs eignen sich, wenn mehrere gleichwertige Bereiche nebeneinander stehen, zum Beispiel Übersicht, Programm, Kursleitung und FAQ.
Akkordeons eignen sich, wenn viele Detailinformationen untereinander stehen, zum Beispiel Voraussetzungen, Material, Anreise, Versicherung und Zahlungsinformationen.
Ein normaler Text ist besser, wenn die Beschreibung kurz ist oder wichtige Informationen sofort sichtbar bleiben müssen.

Nutzen Sie pro Beschreibung nur so viele Bereiche wie nötig. Zu viele Tabs oder Akkordeonpunkte machen eine Angebotsseite schnell unruhig.

Anwendungsbeispiel: Kompakte Kursbeschreibung mit FAQ

Ein Sprachkurs hat eine lange Beschreibung mit Zielgruppe, Kursinhalt, Einstufung, Material und häufigen Fragen. Legen Sie für die wichtigsten Inhalte Tabs an und platzieren Sie darunter ein Akkordeon mit FAQ-Fragen. So bleiben die Kerninformationen sichtbar, während Details bei Bedarf geöffnet werden.

Beschreibung im Quelltext bearbeiten

Öffnen Sie das gewünschte Angebot und wählen Sie Beschreibung bearbeiten. Im Rich-Text-Editor wechseln Sie über das Symbol </> in die Quelltextansicht. Dort fügen Sie den HTML-Code ein und speichern danach die Beschreibung.

Tabs für ein Bootstrap-5.3-Design einfügen

Die folgenden Beispiele sind für Bootstrap 5.3. Öffnen Sie die Beschreibung über Texte → Beschreibung, wechseln Sie in die Quelltextansicht und fügen Sie den Block ein. Das öffentliche Design muss die passenden Bootstrap-Styles und die Tab-Funktion laden. Ein funktionierender Editor allein bestätigt die spätere Darstellung nicht.

<ul class="nav nav-tabs" id="kurs-tabs" role="tablist">
  <li class="nav-item" role="presentation"><button class="nav-link active" id="kurs-uebersicht-tab" data-bs-toggle="tab" data-bs-target="#kurs-uebersicht" type="button" role="tab" aria-controls="kurs-uebersicht" aria-selected="true">Übersicht</button></li>
  <li class="nav-item" role="presentation"><button class="nav-link" id="kurs-programm-tab" data-bs-toggle="tab" data-bs-target="#kurs-programm" type="button" role="tab" aria-controls="kurs-programm" aria-selected="false">Programm</button></li>
</ul>
<div class="tab-content">
  <div class="tab-pane fade show active" id="kurs-uebersicht" role="tabpanel" aria-labelledby="kurs-uebersicht-tab" tabindex="0"><p>Zielgruppe und Voraussetzungen.</p></div>
  <div class="tab-pane fade" id="kurs-programm" role="tabpanel" aria-labelledby="kurs-programm-tab" tabindex="0"><p>Inhalt und Ablauf.</p></div>
</div>

Jedes Paar aus Button und Inhaltsbereich benötigt eindeutige IDs. Wenn Sie den Block duplizieren, ersetzen Sie kurs-uebersicht, kurs-programm und die zugehörigen Tab-IDs im gesamten zweiten Block. Schreiben Sie wichtige Preise, Voraussetzungen und Fristen in einen beim Laden sichtbaren Bereich.

Ein Akkordeon für Bootstrap 5.3 einfügen

Ein Akkordeon ist für ergänzende Informationen wie Material, Anreise oder FAQ geeignet. Die Buttons verweisen auf die jeweiligen Inhaltsbereiche. data-bs-parent sorgt im Beispiel dafür, dass die Bereiche zur selben Gruppe gehören.

<div class="accordion" id="kurs-accordion">
  <div class="accordion-item">
    <h3 class="accordion-header" id="kurs-material-titel"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#kurs-material" aria-expanded="false" aria-controls="kurs-material">Was muss ich mitbringen?</button></h3>
    <div id="kurs-material" class="accordion-collapse collapse" aria-labelledby="kurs-material-titel" data-bs-parent="#kurs-accordion"><div class="accordion-body">Bitte bringen Sie einen geladenen Laptop mit.</div></div>
  </div>
  <div class="accordion-item">
    <h3 class="accordion-header" id="kurs-anreise-titel"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#kurs-anreise" aria-expanded="false" aria-controls="kurs-anreise">Wie finde ich den Kursraum?</button></h3>
    <div id="kurs-anreise" class="accordion-collapse collapse" aria-labelledby="kurs-anreise-titel" data-bs-parent="#kurs-accordion"><div class="accordion-body">Melden Sie sich am Empfang im Erdgeschoss.</div></div>
  </div>
</div>

Ältere Designs verwenden gegebenenfalls Bootstrap 3 und benötigen andere Attribute beziehungsweise Klassen. Mischen Sie data-toggle und alte panel-Klassen nicht mit dem Bootstrap-5.3-Beispiel. Prüfen Sie zuerst die Version des zugeordneten Designs unter Bootstrap 5.3 und passen Sie die Beschreibung dann geschlossen an.

Darstellung prüfen und anpassen

Öffnen Sie nach dem Speichern die Vorschau des Angebots.
Prüfen Sie Desktop und Mobilansicht. Lange Tab-Titel können auf kleinen Bildschirmen umbrechen.
Kontrollieren Sie, ob alle Links auf den richtigen Inhaltsbereich zeigen.
Passen Sie Texte und Farben nur so weit an, dass die Beschreibung weiterhin gut lesbar bleibt.

Individuelle Farben oder Abstände können über CSS im Design Manager angepasst werden. Dokumentieren Sie solche Anpassungen intern, damit spätere Änderungen am Beschreibungstext die Struktur nicht versehentlich beschädigen.