jQuery: Ein DIV aufklappen - andere DIVs zuklappen

Vor einiger Zeit hatte ich bereits ein Tutorial geschrieben in dem ich beschrieben habe, wie man einen Bereich beziehungsweise ein DIV Container mit JavaScript anzeigen und wieder verbergen kann. In den Kommentaren war die Frage aufgekommen, wie es möglich ist, nicht nur das eine neue DIV zu öffnen sondern gleichzeitig auch das zuvor geöffnete DIV automatisch wieder zu schließen. Dieser Frage möchte ich heute nachkommen und in diesem Tutorial beantworten.

HTML

Unser HTML enthält drei Container, die bei einem Klick auf die jeweilig darüber liegende DIV-Box aufgeklappt werden sollen. Zunächst soll beim Laden der Seite nur der erste Container sichtbar sein, die anderen beiden unsichtbar. Aus diesem Grund haben wir das Inline-CSS style="display:none" zu dem zweiten und dritten Container hinzugefügt.

<div class="copen" data-c="c1">Ersten Container öffnen</div>
<div id="c1" class="c">
   Inhalt des ersten Containers
</div>

<div class="copen" data-c="c2">Zweiten Container öffnen</div>
<div id="c2" class="c" style="display:none">
   Inhalt des zweiten Containers
</div>

<div class="copen" data-c="c3">Dritten Container öffnen</div>
<div id="c3" class="c" style="display:none">
   Inhalt des dritten Containers
</div>

Alle Boxen, die später als Links funktionieren sollen, haben die Klasse "copen" erhalten. Die Container, die später in diesem Verbund mitspielen sollen und geöffnet und geschlossen werden können, haben alle die Klasse "c". Außerdem haben die zu öffnenden Container alle eine eindeutige ID erhalten (c1, c2 und c3), die über das Attribut "data-c" mit dem dazugehörigen Link verknüpft sind.

JavaScript / jQuery

Per JavaScript müssen wir nun nur noch zu allen Links die Funktion zum Öffnen und Schließen zuweisen. Unsere Links haben alle die Klasse "copen", so dass wir dafür $(".copen").function() schreiben können.

<script type="text/javascript">
   $(document).ready(function() {  
                     
      $(".copen").click(function() {
 
         $(".c").hide();

         var cid = $(this).data("c");
         $("#"+cid).show();   
 
      });
 
   });
</script>

Als erstes klappen wir alle bisher geöffneten Container zu. Da all diese Container die Klasse "c" zugewiesen haben, ist es ausreichend $(".c").hide() zu schreiben.

Da wir natürlich nicht für jeden Link eine eigene Funktion schreiben möchten, haben wir die ID des jeweiligen Containers im Data-C Attribut gespeichert. Diese lesen wir in der Funktion mit $(this).data("c") als nächstes aus, um sie dann in der Variablen "cid" zu speichern. Anschließend müssen wir nur noch .show() für die jeweilige ID aufrufen und wir haben es geschafft: Unsere gewünschte DIV-Box ist geöffnet, alle anderen DIV-Boxen geschlossen.

Erweiterung des Scripts

Natürlich lässt sich dieses einfache Beispiel beliebig erweitern. Weitere Container lassen sich einfach hinzufügen, indem nach dem selben Muster weitere IDs hinzugefügt werden. Möchte man mehrere Verbünde gleichzeitig auf der selben Seite betreiben, die unabhängig voneinander auf- und zugeklappt werden können, muss man für jeden Verbund eine eigene Klasse "c" wählen und darauf achten, dass auch ansonsten keine ID doppelt vergeben wird.