1824 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
57 Stimmen

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

AntwortenPositiv Negativ
66 Stimmen

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

Positiv Negativ
66 Stimmen

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

Positiv Negativ
77 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

Positiv Negativ
46 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

Positiv Negativ
Antworten
66 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

AntwortenPositiv Negativ
55 Stimmen

Aber was macht die textarea da?

Wieso hast du das Script in eine textarea hinein geschrieben?
13.03.2019 um 03:02

Positiv Negativ
Antworten
55 Stimmen

Sehr geehrter Herr Trost, ich habe Ihr Beispiel gerade ausprobiert.

Die DIV-Container lassen sich nicht zu- bzw. aufklappen.

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>Titel</title>
  <script type="text/javascript" src="jquery-3.6.0min.js"></script>
  <script>
  $(document).ready(function() {
    $(".copen").click(function() {
      $(".c").hide();
      var cid = $(this).data("c");
      $("#"+cid).show();
    });
  });
  </script>
</head>
<body>
  <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>
</body>

Können Sie mir bitte helfen?

Mit freundlichen Grüßen

Enrico
17.04.2022 um 18:08

AntwortenPositiv Negativ
55 Stimmen

Ich habe Ihre Umsetzung gerade ausprobiert und es hat funktioniert.

Kann es sein dass die Datei "jquery-3.6.0min.js" nicht geladen wird? Vielleicht liegt sie in einem anderen Verzeichnis und kann so nicht gefunden werden?
18.04.2022 um 21:35

Positiv Negativ
55 Stimmen

Genau das habe ich später auch gesehen. Ich habe es geändert und es funktioniert. Danke Ihnen.

Trotzdem habe ich dazu noch eine Frage. Ich stehe gerade am Anfang mit JS. Wie bekomme ich das hin, das alle drei Container offen bleiben und nicht geschlossen werden, wenn ich auf einen anderen Container klicke?
19.04.2022 um 21:47

Positiv Negativ
55 Stimmen

Bzw. das ich durch ein anklicken, die Container offen bleiben und durch wiederholtes anklicken geschlossen werden.
19.04.2022 um 21:55

Positiv Negativ
55 Stimmen

Dafür musst du $(".c").hide() raus nehmen. Das veranlasst das Schließen.

Und statt $("#"+cid).show() müsstest du $("#"+cid).toggle() nehmen.
20.04.2022 um 01:18

Positiv Negativ
Antworten
44 Stimmen

Das wurde ja in ähnlicher Form bereits von einem Gast angesprochen, aber ich bin mir sicher, dass er es etwas anders meinte, denn sonst ist es zu einfach.

Angenommen, ich habe fünf Container (div) die geöffnet und geschlossen werden können.

Ich klicke auf den Button für Container 3, Container 3 zeigt sich, alle anderen bleiben geschlossen.

Ich klicke auf den Button für Container 3, Container 3 schließt sich wieder, alle anderen bleiben geschlossen.

Ich klicke auf den Button für Container 2, Container 2 zeigt sich, alle anderen bleiben geschlossen.

Ich klicke auf den Button für Container 4, Container 4 zeigt sich, Container 2 schließt sich.

Ich klicke auf den Button für Container 5, Container 5 zeigt sich, alle anderen bleiben geschlossen.

Ich klicke auf den Button für Container 3, Container 3 zeigt sich, Container 5 schließt sich, alle anderen Container bleiben geschlossen.

Ich klicke auf den Button für Container 3, Container wird Container 3 wieder geschlossen.

Übrigens stürzt diese Seite unter Google Chrome ständig ab (hängt sich auf).
06.12.2023 um 00:04

AntwortenPositiv Negativ
44 Stimmen

Und was ist nun genau Ihre Frage? Genau das was Sie beschreiben soll das Script ja tun.
06.12.2023 um 06:18

Positiv Negativ
Antworten
Antworten

Über den Autor

AvatarSoftware 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

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.