Bestimmt haben Sie dieses Feature schon einmal auf anderen Websites gesehen: Beim Klick auf einen Button erscheint wie von Zauberhand ein Block mit Inhalten (z.B. Texte und Grafiken) und verschwindet bei einem erneuten Klick wieder. Dabei passt sich das Layout dynamisch an.
Dieser Effekt heißt „Ziehharmonika“ oder „Akkordeon“, benannt nach einem klassischen Musikinstrument, welches man durch auf- und zuziehende Bewegungen eines Faltenbalgs zum Klingen bringt.
Das Akkordeon dieses Tutorials
Hier geht’s zur Vorschau… (Link öffnet in einem neuen Tab)
Damit Sie sofort loslegen und experimentieren können, haben wir ein lauffähiges Akkordeon zum Herunterladen vorbereitet. Es nutzt das hier in diesem Dokument beschriebene Beispiel.
Download: Projektpaket CSS-Akkordeon (als .zip-Archiv)
Als kleines Extra finden Sie im Download-Paket eine erweiterte Version des Akkordeons, welche das Auf- und Zuklappen der Akkordeon-Einheiten animiert.
Grundsätzlicher Aufbau
Standard-Version (im Folgenden beschrieben)
Für die Realisierung des Akkordeon-Effekts benötigen wir mehrere anklickbare Elemente, idealerweise Buttons und „div“-Boxen zum Auf-/Zuklappen der Inhalte (im folgenden „Akkordeon-Einheiten“ genannt).
Eine JavaScript-Funktion ändert bei Klick auf einen Button die CSS-Eigenschaft „display“ der zu dem Button gehörigen „div“-Box. Dadurch erscheint diese entweder auf der Seite oder verschwindet.
Die Steuerung der Akkordeon-Einheiten erfolgt unabhängig voneinander. Es ist also problemlos möglich, mehrere „div“-Boxen gleichzeitig geöffnet zu halten.
Lesetipps: In unserer Trickkiste liegt sogar ein eigener Beitrag über die CSS-Eigenschaft „display“ und hier erfahren Sie alles über HTML-Buttons! 🙂
Erweiterte Version (Teil des Download-Pakets)
Einen anderen Weg beschreitet diese Variante. Anstelle der CSS-Eigenschaft „display“ verwendet sie die animierbare Eigenschaft „max-height“. Ansonsten arbeiten beide Akkordeons nach dem gleichen Prinzip.
Implementierung Schritt-für-Schritt
Im folgenden erklären wir anhand eines simpel aufgebauten HTML-Dokuments ausführlich, wie der Ziehharmonika-Effekt im Detail funktioniert.
Schritt 1: Styles der Elemente festlegen
<style>
.ofa_akkordeonButton {
width: 100%;
padding: 8px;
margin-bottom: 3px;
border: 0px;
background-color: #e8e8e8;
font-size: 16px;
font-weight: normal;
color: #282828;
cursor: pointer;
transition: 0.5s; }
.ofa_akkordeonButtonAktiv, .ofa_akkordeonButton:hover {
background-color: #c4e14d;
font-weight: bold; }
.ofa_akkordeonEinheit {
background-color: #ffffff;
padding: 0px 12px;
overflow: hidden;
display: none; }
</style>So funktioniert’s:
Diese Style-Anweisungen sollten im Kopfbereich des HTML-Dokuments platziert werden (also zwischen den beiden <head>…</head>-Tags).
Die Klasse „ofa_akkordeonButton“ legt das Aussehen der Schaltflächen zur Steuerung des Akkordeons fest. Sie können diese nach Belieben verändern und dem Layout Ihrer Website anpassen.
Im zweiten Abschnitt („ofa_akkordeonButtonAktiv“, „ofa_akkordeonButton:hover“) definieren wir das Verhalten der Buttons beim Überfahren mit der Maus sowie beim Anklicken. Dadurch verbessert sich die Nutzerführung; auf die Funktion der Ziehharmonika hat das aber keinen Einfluss.
Der dritte Abschnitt ist für das Aussehen der Akkordeon-Einheiten erforderlich (das sind die einzelnen Elemente, die sich mit den Buttons steuern lassen). Hier kommt es auf die Eigenschaft display: none; an – denn die Akkordeons sollen beim Laden der Seite unsichtbar sein.
Schritt 2: Steuerungsskript einfügen
<script>
var akkordeon = document.getElementsByClassName("ofa_akkordeonButton");
var x;
for (x = 0; x < akkordeon.length; x++)
{
akkordeon[x].addEventListener("click", function()
{
this.classList.toggle("ofa_akkordeonButtonAktiv");
var akkordeonEinheit = this.nextElementSibling;
if (akkordeonEinheit.style.display === "block")
{ akkordeonEinheit.style.display = "none"; }
else
{ akkordeonEinheit.style.display = "block"; }
});
}
</script>Tipp: Beachten Sie bei der Eingabe, dass JavaScript penibel die Groß-/Kleinschreibung unterscheidet!
So funktioniert’s:
Das JavaScript erzeugt einen „Event Listener“ – dabei handelt es sich um eine Funktion, die abhängig von einer bestimmten (Nutzer-)Aktion ausgeführt wird.
Unser Event Listener reagiert auf Mausklicks in die Buttons (genauer: alle Elemente, welchen die Klasse „ofa_akkordeonButtons“ zugeordnet wurde) und erledigt zwei Aufgaben:
- Die Steuerung des optischen Effekts (indem die Klasse „ofa_akkordeonButtonAktiv“ dem Element entweder zugeordnet oder von ihm entfernt wird).
- Die Zuordnung eines neuen Werts zur CSS-Eigenschaft „display“ basierend auf ihrem aktuellen Wert („block“ -> „none“, „none“ -> „block“). Hier schlägt das Herz des Akkordeons!
Auf die Position kommt es an!
Idealerweise fügen Sie das Skript einfach vor dem schließenden </body>-Tag ein; auf alle Fälle muss es nach den Buttons und den zu steuernden Akkordeon-Einheiten eingebunden werden.
Ein vorheriger Aufruf oder gar das Einbinden des Skripts im Kopf des Dokuments (<head>…</head>) würde nicht funktionieren, da sich für die Definition des Event Listeners via JavaScript alle benötigten Elemente bereits im DOM-Baum der Seite befinden müssen.
Schritt 3: Buttons und Inhalte erstellen
Wie in der Einführung bereits beschrieben, ist es am sinnvollsten, die in der Ziehharmonika befindlichen Inhalte von „div“-Boxen zu umschließen. In HTML sieht das beispielsweise folgendermaßen aus:
<button class="ofa_akkordeonButton">Überschrift 1</button>
<div class="ofa_akkordeonEinheit">
<p>Hier steht beliebiger Inhalt.</p>
</div>
<button class="ofa_akkordeonButton">Überschrift 2</button>
<div class="ofa_akkordeonEinheit">
<p>Hier steht beliebiger Inhalt.</p>
</div>Sie können die Buttons an jeder beliebigen Stelle Ihrer Website unterbringen; wir haben in unserem Beispiel einen klassischen Akkordeon-Effekt realisiert.
Wichtig ist hierbei lediglich die exakte Benennung der CSS-Klassen – diese werden von der JavaScript-Funktion zur Steuerung der Ziehharmonika eingesetzt.
Tipp: So können Sie eine bestimmte Akkordeon-Einheit beim Laden der Seite sichtbar machen:
<button class="ofa_akkordeonButton ofa_akkordeonButtonAktiv">Überschrift 1</button>
<div class="ofa_akkordeonEinheit" style="display:block;">
<p>Mich kann man beim Laden der Seite gleich lesen...</p>
</div>Funktionsweise: Die im „style“-Attribut definierten CSS-Eigenschaften haben Vorrang vor den im „class“-Attribut festgelegten Klassen.
Akkordeon-Effekt einer vorhandenen Webseite hinzufügen
Um diesen Effekt in einem bereits bestehenden HTML-Dokument anzuwenden, sind grundsätzlich die folgenden Änderungen notwendig:
- CSS im Header anpassen und JavaScript-Code vor dem abschließenden </body>-Tag einfügen.
- Buttons oder andere zur Steuerung des Akkordeons bestimmte Elemente hinzufügen und diesen die CSS-Klasse „ofa_akkordeonButton“ zuordnen.
- Inhalte der Seite in Akkordeon-Einheiten aufteilen; dafür mehrere „div“-Boxen anlegen und diesen die CSS-Klasse „ofa_akkordeonEinheit“ zuordnen.
Backup und Testläufe…
Legen Sie vor Änderungen an Ihrer Website unbedingt eine Sicherungskopie an und führen nach jedem einzelnen Schritt einen Testlauf durch bzw. lassen die Seite auf (Tipp-)Fehler überprüfen.
Einige Webbrowser bieten für genau solche Zwecke den Zugriff auf eine „Konsole“ genannte Debugging-Funktion (meist Bestandteil der „Entwickler-Tools“ bzw. „Developer-Tools“). Alternativ können Sie auch einen Webeditor mit integrierter Syntaxprüfung einsetzen.
Autor: Tobias Eichner | Datum der Veröffentlichung: November 2018
Wichtig: Bitte beachten Sie die Nutzungsbedingungen und rechtlichen Hinweise für diesen Beitrag!
