5 11 Stimmen

jQuery: Ein DIV aufklappen - andere DIVs zuklappen

Tutorial von Stefan Trost | Letztes Update am 10.01.2018 | Erstellt am 10.08.2016

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.

AntwortenPositivNegativDatumStimmen
11 Stimme

Guten Tag,

ich habe die Funktion einzelne DIV Container auf- und zuklappen gut hinbekommen. Vielen Dank dafür. Allerdings bei einem DIV aufklappen und die anderen DIV´s schließen verstehe ich nicht ganz. Ich weiß nicht genau wie ich die Links setzen soll und wie die function genau in den head geschrieben wird. Können Sie mir da weiterhelfen?

vielen Dank, Hans
24.02.2017 um 09:33 Uhr

AntwortenPositiv Negativ

Stefan Trost

Profil anzeigen | Nachricht
Avatar
11 Stimme

Das Tutorial auf dieser Seite beruht im Gegenteil zu dem Tutorial zu einzelnen DIV-Containern auf jQuery. Das heißt, dass man zusätzlich noch die jQuery Bibilothek einbinden muss, damit es funktioniert.

Ein Beispiel wie eine solche Einbindung aussieht, findest du zum Beispiel in dem Code-Beispiel hier, wo eine komplette HTML Seite mit HTML und jQuery-Code dargestellt ist.

Nachdem jQuery eingebunden ist, kannst du einfach das HTML auf die Seite setzen und den hier gezeigten JavaScript/jQuery-Code genauso nutzen wie in dem anderen Tutorial.
24.02.2017 um 18:06 Uhr

Positiv Negativ
11 Stimme

Danke für den Hinweis, habe jetzt alles so gemacht läuft leier doch nicht. habe mit Firebug die Seite überprüft. Dieser zeigt einen Fehler in der Funktion an. Leider weiß ich hier auch nicht weiter, bin kein Profi im Programmieren. Wen du die Muße hast, ich habe eine Testseite incl. Bild von Fehlermeldung online gestellt. Jquery Datei liegt auch im angegebene Verzeichnis. Vielen Dank

kredel-odw.de/testseite/testseite.html
26.02.2017 um 11:55 Uhr

Positiv Negativ

Stefan Trost

Profil anzeigen | Nachricht
Avatar
22 Stimmen

Da war noch ein kleiner Fehler drin (habe ich inzwischen korrigiert). Die Zeile 

$(".copen").function() {

muss in

$(".copen").click(function() {

geändert werden. Dann sollte es funktonieren.
26.02.2017 um 17:17 Uhr

Positiv Negativ
00 Stimmen

Danke für die tolle Hilfe!

Das war genau das was ich brauchte. Es funktioniert jetzt genauso wie ich es mir vorgestellt habe.

Danke nochmals. Hans
28.02.2017 um 12:08 Uhr

Positiv Negativ
00 Stimmen

Vielen Dank für die Anleitung.

Bei mir war immer ein DIV-Container schon aufgeklappt, also habe ich das Script angepasst.

Außerderm habe ich das Ausklappen auf langsam gesetzt mit: $(element).show("slow")

<textarea cols="50" rows="15">
<script type="text/javascript">
  $(document).ready(function() {
    $(".c").hide();
    $(".copen").click(function() {
      $(".c").hide();
      var cid = $(this).data("c");
      $("#"+cid).show("slow");
    });
  });
</script>
</textarea>

12.03.2019 um 17:32 Uhr

AntwortenPositiv Negativ
00 Stimmen

Aber was macht die textarea da?

Wieso hast du das Script in eine textarea hinein geschrieben?
13.03.2019 um 03:02 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.