Tabs und Accordion

Tabs und Accordion sind zwei häufige UI-Muster, mit denen du viele Inhalte auf wenig Platz darstellst. Der Nutzer klickt auf einen Bereich – und du zeigst den passenden Inhalt an, ohne die Seite neu zu laden.

Beides baust du mit HTML, CSS und JavaScript. Das Prinzip kennst du schon aus dem Kapitel Responsive Navigation: Du schaltest mit classList Klassen um und steuerst die Sichtbarkeit im CSS.

Was sind Tabs und Accordion?

Beide Muster sparen Platz – sie funktionieren aber unterschiedlich:

Tabs – HTML und JavaScript

Bei Tabs legst du oben Buttons an und darunter die zugehörigen Inhaltsbereiche. Mit data-tab verknüpfst du jeden Button mit seinem Panel über die id.

1<div class="tabs">
2    <button class="tab-btn active" data-tab="tab1">Profil</button>
3    <button class="tab-btn" data-tab="tab2">Einstellungen</button>
4    <button class="tab-btn" data-tab="tab3">Hilfe</button>
5</div>
6
7<div class="tab-content active" id="tab1">
8    <p>Inhalt für den Tab „Profil“.</p>
9</div>
10<div class="tab-content" id="tab2">
11    <p>Inhalt für den Tab „Einstellungen“.</p>
12</div>
13<div class="tab-content" id="tab3">
14    <p>Inhalt für den Tab „Hilfe“.</p>
15</div>

Mit JavaScript reagierst du auf Klicks auf die Tab-Buttons. Dabei gehst du so vor: Zuerst findest du alle Buttons und Inhaltsbereiche, dann registrierst du für jeden Button einen Klick-Handler – und beim Klick schaltest du die Klasse active um.

1const tabButtons = document.querySelectorAll(".tab-btn");
2const tabContents = document.querySelectorAll(".tab-content");
3
4tabButtons.forEach(function(button) {
5    button.addEventListener("click", function() {
6        const targetId = button.dataset.tab;
7
8        tabButtons.forEach(function(btn) {
9            btn.classList.remove("active");
10        });
11        tabContents.forEach(function(content) {
12            content.classList.remove("active");
13        });
14
15        button.classList.add("active");
16        document.getElementById(targetId).classList.add("active");
17    });
18});

Schritt für Schritt erklärt:

• document.querySelectorAll(".tab-btn") – du findest alle Tab-Buttons auf der Seite und speicherst sie in tabButtons
• document.querySelectorAll(".tab-content") – genauso sammelst du alle Inhaltsbereiche in tabContents
• tabButtons.forEach(...) – du gehst jeden Button einzeln durch und hängst an jeden einen Klick-Handler
• button.dataset.tab – du liest den Wert aus dem data-tab-Attribut aus (z. B. "tab1"). Das ist die id des Panels, das du anzeigen willst
• Die beiden inneren forEach-Schleifen entfernen zuerst "active" von allen Buttons und Panels – so ist garantiert nur noch ein Tab aktiv
• button.classList.add("active") – du markierst den angeklickten Button als aktiv (für die Hervorhebung im CSS)
• document.getElementById(targetId).classList.add("active") – du zeigst den passenden Inhaltsbereich an, dessen id zum data-tab-Wert passt

Ablauf beim Klick: Nutzer klickt auf „Einstellungen“ → JavaScript liest data-tab="tab2" → entfernt active überall → setzt active auf den Button und auf #tab2 → CSS zeigt nur diesen Inhalt an.

Wichtig: JavaScript ändert nur die Klassen – ob ein Tab sichtbar ist, legst du im CSS fest (siehe nächster Block).

1.tab-content {
2    display: none;
3}
4
5.tab-content.active {
6    display: block;
7}
8
9.tab-btn.active {
10    font-weight: bold;
11    border-bottom: 2px solid #3498db;
12}

Im CSS blendest du alle Inhalte aus und zeigst nur den Bereich mit .active an:

• .tab-content – standardmäßig versteckt (display: none)
• .tab-content.active – nur der aktive Tab wird angezeigt
• .tab-btn.active – der aktive Button wird hervorgehoben

Accordion – HTML und JavaScript

Beim Accordion stehen Button und Panel direkt hintereinander im HTML. Beim Klick schaltest du mit classList.toggle() die Klasse open am zugehörigen Panel um – das Panel klappt auf oder zu.

1<div class="accordion">
2    <button class="accordion-btn">Was ist HTML?</button>
3    <div class="accordion-panel">
4        <p>HTML ist die Auszeichnungssprache für Webseiten.</p>
5    </div>
6
7    <button class="accordion-btn">Was ist CSS?</button>
8    <div class="accordion-panel">
9        <p>CSS gestaltet das Aussehen von HTML-Elementen.</p>
10    </div>
11</div>

Das JavaScript ist hier kürzer als bei Tabs, weil du pro Button nur ein Panel umschaltest – nicht alle auf einmal:

1const accordionButtons = document.querySelectorAll(".accordion-btn");
2
3accordionButtons.forEach(function(button) {
4    button.addEventListener("click", function() {
5        const panel = button.nextElementSibling;
6        panel.classList.toggle("open");
7    });
8});

Schritt für Schritt erklärt:

• document.querySelectorAll(".accordion-btn") – du findest alle Accordion-Buttons und speicherst sie in accordionButtons
• accordionButtons.forEach(...) – du registrierst für jeden Button einen eigenen Klick-Handler
• button.nextElementSibling – du greifst auf das direkt folgende HTML-Element zu. Das ist das Panel mit der Klasse accordion-panel, das direkt nach dem Button im HTML steht
• panel.classList.toggle("open") – du schaltest die Klasse "open" um: Ist sie noch nicht gesetzt, wird sie hinzugefügt (Panel öffnet sich). Ist sie schon da, wird sie entfernt (Panel schließt sich)

Ablauf beim Klick: Nutzer klickt auf „Was ist HTML?“ → JavaScript findet das nächste Element (accordion-panel) → toggle("open") fügt die Klasse hinzu → CSS zeigt das Panel an. Beim zweiten Klick auf denselben Button wird open wieder entfernt.

Unterschied zu Tabs: Beim Accordion musst du nicht alle Panels zurücksetzen – du änderst nur das Panel des angeklickten Buttons. Deshalb reicht hier toggle() statt remove() und add().

1.accordion-panel {
2    display: none;
3    padding: 12px;
4}
5
6.accordion-panel.open {
7    display: block;
8}
9
10.accordion-btn {
11    width: 100%;
12    text-align: left;
13    padding: 12px;
14    cursor: pointer;
15}

Im CSS steuerst du, wann ein Panel sichtbar ist – genau wie bei den Tabs:

• .accordion-panel – standardmäßig versteckt
• .accordion-panel.open – nur geöffnete Panels werden angezeigt

Tipp: Wenn du möchtest, dass immer nur ein Accordion-Abschnitt offen ist, entfernst du vor dem Öffnen die Klasse open von allen anderen Panels.