14 34 Stimmen

JavaScript: Bereich durch Link aufklappen und zuklappen

Tutorial von Stefan Trost | 24.10.2013 um 16:26 Uhr

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 und wenn man auf eine dieser Überschriften klickt, öffnet sich darunter der Text, 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, 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.

AntwortenPositivNegativDatumStimmen
00 Stimmen

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 Uhr

AntwortenPositiv Negativ
-11 Stimme

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 Uhr

Positiv Negativ

Stefan Trost

Profil anzeigen | Nachricht
Avatar
00 Stimmen

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 Uhr

Positiv Negativ
Antworten

Über den Autor

Avatar AutorSoftware 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 | Nachricht

 

Ähnliche Themen

Wichtiger Hinweis

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.