JavaScript: Bereich durch Link aufklappen und zuklappen
Tutorial von Stefan Trost | Letztes Update am 30.04.2021 | Erstellt am 24.10.2013
Wenn wir viele Informationen und Texte auf einer einzelnen Internetseite haben, bieten sich der Übersicht halber Bereiche an, die man auf und zu klappen kann. Mit anderen Worten: Wir haben verschiedene Überschriften oder Topics und wenn man auf eine dieser Überschriften klickt, öffnet sich darunter der Text oder ein anderer Inhalt, der sonst unsichtbar ist. Klickt man ein weiteres Mal auf die Überschrift, schließt sich der Text wieder.
Eine mögliche Anwendung sind zum Beispiel Seiten mit häufigen Fragen (FAQ Sections). Eine solche Seite kann so aussehen, dass die einzelnen Fragen aufgelistet sind und man die Antworten erhält und erst sehen kann, wenn man auf die Fragen klickt.
In diesem Tutorial möchte ich euch zeigen, wie ihr solch eine Seite anlegen könnt.
Der JavaScript Code
Zunächst benötigen wir den Java Script Code. Es handelt sich dabei um eine Funktion, der wir die ID unseres Bereiches übergeben können und die sich dann darum kümmert, den Bereich zu öffnen oder zu schließen, abhängig davon, ob der Bereich aktuell offen oder geschlossen ist.
<script type="text/javascript">
function toggle(id){
var e = document.getElementById(id);
if (e.style.display == "none"){
e.style.display = "";
} else {
e.style.display = "none";
}
}
</script>
Wir fügen diesen Code einfach oben in den HEAD-Bereich unserer Seite zwischen <head> und </head> ein. Zum Beispiel nach der Zeile mit dem Seitentitel. Damit ist unsere Funktion auf der ganzen Seite verfügbar und kann beliebig oft wieder verwendet werden.
Der aufklappbare HTML Bereich
Als nächstes kommen wir uns um den Bereich, der tatsächlich auf und zugeklappt werden soll. Das Muster ist dabei immer folgendes:
<a href="javascript:toggle('containerid')">Aufklappen</a>
<div id="containerid" style="display:none">Text</div>
Wir haben also einerseits unseren Link und andererseits einen DIV-Container, der offen oder geschlossen sein kann. Mit unseren Link rufen wir die Funktion mit der ID des Containers auf, den wir öffnen möchten. In diesem Beispiel lautet die ID "containerid". Zusätzlich haben wir unserem Container die CSS-Eigenschaft "display:none" hinzugefügt. Dies stellt sicher, dass der Bereich beim Laden der Seite geschlossen (unsichtbar) ist.
Mehrere aufklappbare Bereiche
Wenn wir mehrere Bereiche aufklappen und zuklappen möchten, ist es wichtig, immer eindeutige IDs zu vergeben, damit die Verbindung zwischen Link und Container gewährleistet ist.
<a href="javascript:toggle('f1')">Frage 1</a>
<div id="f1" style="display: none">Antwort 1</div>
<a href="javascript:toggle('f2')">Frage 2</a>
<div id="f2" style="display: none">Antwort 2</div>
<a href="javascript:toggle('f3')">Frage 3</a>
<div id="f3" style="display: none">Antwort 3</div>
Hier haben wir beispielhaft 3 Frageblöcke mit den IDs "f1", "f2" und "f3" installiert. Natürlich lässt sich auch jede beliebige andere ID verwenden und statt einem Link und einem DIV-Container lassen sich natürlich auch beliebige andere HTML Elemente verwenden.
Ein Bereich aufklappen - andere schließen
In den Kommentaren war die Frage aufgekommen, ob es möglich ist, dieses Skript so zu erweitern, dass automatisch beim Aufklappen einer Box alle anderen Boxen beziehungsweise die letzte Box geschlossen wird. Folgt einfach diesem Link, dort habe ich ein weiteres Tutorial zu genau diesem Thema geschrieben.
Einschränkungen dieses Scripts
Da wir eine JavaScript Funktion verwenden, funktioniert dieses Script natürlich nur, wenn im Browser des Nutzers auch Javaskript aktiviert ist. Ist Javascript deaktiviert und wir setzen unsere Bereiche auf unsichtbar, besteht für den Nutzer keine Chance, diese Bereiche sichtbar zu bekommen (es sei denn er schaut in den Code).
Aus diesem Grund muss man genau darüber nachdenken, wann der Einsatz sinnvoll ist und wann nicht. Ein möglicher Workaround ist, alle unsichtbaren Bereiche zunächst auf sichtbar zu stellen und erst mit einer Javascript Funktion die Unsichtbarkeit herzustellen. Damit würden die Bereiche nur dann sichtbar werden, wenn ein Nutzer auch Java Skript eingeschaltet hat und damit auch im Stande ist, die Funktion zu nutzen.
Über den Autor
Software von Stefan Trost finden Sie auf sttmedia.de. Benötigen Sie eine individuelle Software nach Ihren eigenen Wünschen? Schreiben Sie uns: sttmedia.de/kontakt
Profil anzeigen
Ähnliche Themen
jQuery: Ein DIV aufklappen - andere DIVs zuklappen
Tutorial | 14 Kommentare
Mehrere Texte gleichzeitig ersetzen
Tutorial | 0 Kommentare
MySQL: GROUP BY Bereich - Anzahl kleiner, mittlerer und größerer Datensätze bestimmen
Tipp | 0 Kommentare
Bilder, CSS, JS und Seiten neu laden trotz Browser-Cache
Tipp | 2 Kommentare
Delphi/Lazarus: Link zu einer Website in einer Anwendung setzen
Tutorial | 0 Kommentare
jQuery: Durch Klick auf Links DIV-Inhalt laden und ersetzen
Tutorial | 6 Kommentare
jQuery: CSS Stylesheet Switcher
Tutorial | 1 Kommentar
Wichtiger Hinweis
Bitte beachten Sie: Die Beiträge auf askingbox.de sind Beiträge von Nutzern und sollen keine professionelle Beratung ersetzen. Sie werden nicht von Unabhängigen geprüft und spiegeln nicht zwingend die Meinung von askingbox.de wieder. Mehr erfahren.
Jetzt mitmachen
Stellen Sie Ihre eigene Frage oder schreiben Sie Ihren eigenen Artikel auf askingbox.de. So gehts.
Danke für das Script. Funktioniert bei mir einwandfrei! Gibt es vielleicht die Möglichkeit das Script so umzuschreiben, dass sobald ein neuer "Container" aufgeklappt wird, der bereits geöffnete Container sich automatisch schließt? Also immer nur ein Container geöffnet ist.
Freue mich über eine Antwort
09.10.2015 um 15:32
Bin gerade dabei genau das gleiche zu machen. Hast du zufällig eine Lösung dafür gefunden?
Danke schonmal!
26.11.2015 um 17:27
Gute Frage! Ich habe ein weiteres Tutorial geschrieben, in dem ich eine Lösung dafür beschreibe.
Das Tutorial habe ich oben im Artikel verlinkt.
10.08.2016 um 20:46