Sie haben einen fertigen jQuery-Ausschnitt für einen „Ein-/Ausblenden"-Button gefunden, der nicht funktioniert? Code, der .toggle() verwendet, wurde nach einer jahrzehntealten Anleitung geschrieben und ist mit jQuery 1.9 stillschweigend kaputtgegangen. Für einen Anfänger wirkt diese Situation wie schwarze Magie: Die Konsole ist leer, keine Fehler, der Button reagiert einfach nicht auf den zweiten Klick.

Das Problem ist, dass die Methode .toggle() in jQuery zwei Leben hatte. Das erste, das animierte Ein- und Ausblenden von Elementen, lebt noch. Das zweite, das abwechselnde Ausführen von Aktionen bei Klick, wurde 2013 entfernt, aber Suchmaschinen spülen alte Artikel immer noch als Top-Ergebnisse nach oben. Hier erklären wir, warum der alte Code tot ist, und schreiben drei funktionierende Alternativen, von einem einfachen Flag bis zu Data-Attributen für ein Dutzend Buttons auf einmal.

💡 Kurzüberblick:

• Warum Ihr .toggle(fn1, fn2) nicht funktioniert und wo Sie nach veraltetem Code suchen müssen
• Methode 1: eine Zustandsvariable für einen einzelnen Button mit minimalem Code
• Methode 2: .data(), wenn Sie viele Buttons haben und jeder sein Eigenleben führt
• Bonus: drei oder mehr Aktionen in einer Klickkette mithilfe eines Zählers
• Modernes .toggle() für Animation, was geblieben ist und wie Sie es einsetzen

Was ist.toggle() in jQuery und warum alter Code tot ist

Vor jQuery 1.8 konnte die Methode .toggle() abhängig von den übergebenen Argumenten zwei verschiedene Dinge tun. Übergab man zwei Funktionsparameter, arbeitete sie als Umschalter: Der erste Klick führte die erste Funktion aus, der zweite Klick die zweite, der dritte Klick wieder die erste und so weiter im Kreislauf.

Das sah kompakt aus:

1
// Worked in jQuery before 1.8, removed in 1.9
2
$('#myButton').toggle(
3
  function() {
4
    $(this).text('Show categories').css('background', 'green');
5
  },
6
  function() {
7
    $(this).text('Hide categories').css('background', 'red');
8
  }
9
);

Genau dieser Code geistert bis heute durch russischsprachige Blogs. Das Problem: Mit dem Release von jQuery 1.9 (Januar 2013) wurde diese Form von .toggle() vollständig entfernt. Der Grund: Der doppelte Verwendungszweck der Methode stiftete Verwirrung, und Anfänger verstanden nicht, warum .toggle() manchmal animierte und manchmal Aktionen umschaltete.

Heute macht .toggle() nur noch eines: ein Element mit Animation ein- oder ausblenden. Für abwechselnde Aktionen muss der Entwickler den Zustand explizit verwalten.

Methode 1: Zustandsvariable

Der direkteste Ansatz ist, eine boolesche Variable anzulegen und sie im .click()-Handler umzuschalten. Geeignet für einen einzelnen Button oder Elemente mit gemeinsamer Umschaltlogik.

Fügen Sie den Code in Ihre Theme-Skriptdatei ein (via wp_enqueue_script in functions.php) oder in einen <script>-Block vor dem schließenden </body>:

1
let isFirstClick = true;
2
 
3
$('#toggleBtn').on('click', function() {
4
  const $btn = $(this);
5
 
6
  if (isFirstClick) {
7
    $btn.text('Hide categories');
8
    $('#contentBlock').show(700);
9
    isFirstClick = false;
10
  } else {
11
    $btn.text('Show categories');
12
    $('#contentBlock').fadeOut('slow');
13
    isFirstClick = true;
14
  }
15
});

Hier speichert isFirstClick den aktuellen Zustand außerhalb des Handlers. Der erste Klick blendet den Block ein und setzt das Flag auf false, der zweite blendet ihn aus und setzt das Flag zurück. Keine Magie: Sie wissen genau, welche Aktion jetzt und welche als nächstes erfolgt.

Der Vorteil dieses Ansatzes: Das Flag kann von überall im Programm zurückgesetzt werden. Soll der Button beispielsweise nach einer AJAX-Anfrage in seinen Ausgangszustand zurückkehren, setzen Sie einfach isFirstClick = true.

Der Nachteil: eine Variable für alle Buttons. Hat die Seite zwei unabhängige Umschalter mit der Klasse .toggleBtn, teilen sich beide die Variable isFirstClick. Für ein solches Szenario nutzen Sie Methode 2.

Methode 2: jQuery Data-Attribute

Wenn Sie mehrere unabhängige Buttons haben (zum Beispiel hat jedes Produkt in einem Katalog seinen eigenen Spezifikationsblock), müssen Sie den Zustand direkt am DOM-Element speichern. Die Methode .data() heftet beliebige Daten an ein Element, ohne den globalen Namensraum zu verschmutzen.

Laden Sie das Skript auf dieselbe Weise, via wp_enqueue_script oder im Footer:

1
$('.toggle-btn').on('click', function() {
2
  const $btn = $(this);
3
  const hasClicked = $btn.data('clicked') || false;
4
 
5
  if (!hasClicked) {
6
    $btn.text('Hide specifications').css('background', '#f0f0f0');
7
    $btn.next('.specs-block').show(400);
8
    $btn.data('clicked', true);
9
  } else {
10
    $btn.text('Show specifications').css('background', '#fff');
11
    $btn.next('.specs-block').fadeOut(300);
12
    $btn.data('clicked', false);
13
  }
14
});

Der Aufruf $btn.data('clicked') liest den Zustand genau dieses Buttons. Zehn Buttons auf der Seite bedeuten zehn isolierte Zustände. Keine Konflikte.

Hinweis: .data() arbeitet mit dem Speicher von jQuery, nicht mit HTML-data-*-Attributen. Wenn der Zustand einen Seitenneuladung überleben muss, schreiben Sie zusätzlich $btn.attr('data-clicked', 'true') und lesen via .attr().

Bonus: drei oder mehr Aktionen in einer Kette

Was, wenn es nicht zwei, sondern drei Klicks sein sollen? Beispiel: Erster Druck blendet den Block ein, zweiter ändert seinen Inhalt, dritter blendet ihn aus. Hier erstellen Sie statt eines booleschen Flags einen numerischen Zähler:

1
$('#multiBtn').on('click', function() {
2
  const $btn = $(this);
3
  let count = $btn.data('clickCount') || 0;
4
 
5
  switch (count) {
6
    case 0:
7
      $btn.text('Step 1: show block');
8
      $('#targetBlock').show(500);
9
      break;
10
    case 1:
11
      $btn.text('Step 2: load data');
12
      $('#targetBlock').load('/ajax-content');
13
      break;
14
    case 2:
15
      $btn.text('Step 3: hide');
16
      $('#targetBlock').fadeOut(400);
17
      count = -1; // next click will become case 0 again
18
      break;
19
  }
20
 
21
  $btn.data('clickCount', count + 1);
22
});

Das Zurücksetzen des Zählers (count = -1) ist sinnvoll, wenn die Kette in einer Schleife laufen soll. Ist die Aktion einmalig, entfernen Sie einfach das Zurücksetzen, und nach dem dritten Klick passiert nichts mehr.

Modernes.toggle() für Animation

Die überlebende Form von .toggle() ist strikt für die Sichtbarkeit von Elementen zuständig. Ohne Argumente erfolgt das Umschalten sofort. Mit einer Dauerangabe animiert sie gleichzeitig Breite, Höhe und Deckkraft.

Grundszenario: ein Button „Menü ein-/ausblenden":

1
$('#menuToggle').on('click', function() {
2
  $('#mainMenu').toggle('slow', function() {
3
    // callback after animation completes
4
    console.log('Animation complete');
5
  });
6
});

Die Zeichenketten 'fast' und 'slow' ergeben 200 bzw. 600 Millisekunden. Sie können eine exakte Zahl übergeben: .toggle(400) bedeutet 400 ms.

Ein nützlicher Trick: den Zustand über einen booleschen Parameter erzwingen. .toggle(true) zeigt das Element immer an, und .toggle(false) blendet es immer aus. Das ist praktisch in Kombination mit einem externen Flag aus Methode 1:

1
let visible = true;
2
$('#toggleBtn').on('click', function() {
3
  visible = !visible;
4
  $('#content').toggle(visible);
5
});

Der Code liest sich linear: Das Flag wird gekippt, das Element nimmt den geforderten Zustand ein. Kein bedingtes if/else um die Sichtbarkeit herum.

⁉️🤔 Häufig gestellte Fragen

Warum zeigt mein alter Code mit .toggle(fn1, fn2) keine Fehler in der Konsole an?

Die alte Form von .toggle() wurde auf Methodenebene entfernt: jQuery findet eine solche Signatur einfach nicht und tut stillschweigend nichts. Die Konsole ist leer, weil der Aufruf .toggle(fn1, fn2) für modernes jQuery ein syntaktisch korrekter, aber bedeutungsloser Aufruf ist (Argumente werden ignoriert). Prüfen Sie Ihre jQuery-Version: Ist sie 1.9 oder höher, ist der alte Code tot.

Kann ich jQuery Migrate einbinden und den Code nicht umschreiben?

Technisch ja. Das jQuery-Migrate-Plugin stellt entfernte Methoden wieder her, einschließlich des alten .toggle(). Aber das ist eine vorübergehende Krücke: Migrate fügt rund 10 KB minifiziert hinzu und ist für eine Übergangsphase gedacht, nicht für den dauerhaften Einsatz. Läuft die Seite auf WordPress und jQuery wird aus dem Core geladen, ist Migrate aus Gründen der Abwärtskompatibilität bereits vorhanden. Sich im eigenen Code darauf zu verlassen, ist jedoch nicht empfehlenswert: Es kann jederzeit durch ein Theme- oder Plugin-Update deaktiviert werden.

Was ist besser, eine Variable oder ein Data-Attribut?

Für einen einzelnen Button nutzen Sie eine Variable (weniger Code). Für mehrere unabhängige Buttons oder dynamisch hinzugefügte Elemente nutzen Sie .data() (Zustandsisolation). Werden Buttons nach dem Seitenaufbau per AJAX hinzugefügt, verwenden Sie Delegation: $(document).on('click', '.toggle-btn', function() { ... }).

Funktioniert.toggle() auf mobilen Geräten?

Ja. Modernes .toggle() (Animation) und alle Click-Handler aus diesem Artikel arbeiten mit Touch-Events korrekt. jQuery normalisiert click für mobile Browser seit seinen frühesten Versionen. Die einzige Nuance: Auf iOS vor Version 12 hatten Elemente ohne cursor: pointer einen verzögerten Klick, aber dieses Problem ist mit einer CSS-Zeile touch-action: manipulation für den Button gelöst.

Wo soll ich jQuery-Code in WordPress platzieren?

Drei Optionen. Schnell: das Plugin Code Snippets: Fügen Sie JS-Code in einen Snippet mit Typ „JavaScript" ein, und es lädt automatisch im Footer. Ordentlich: Erstellen Sie eine Datei js/toggle.js in Ihrem Child-Theme, registrieren Sie sie via wp_enqueue_script('my-toggle', get_stylesheet_directory_uri() . '/js/toggle.js', array('jquery'), '1.0', true) in functions.php. Der Parameter true am Ende schickt das Skript in den Footer, was Standard für Code ist, der mit dem DOM arbeitet. Setzen Sie <script> nicht direkt in den Beitragsbody; der WordPress-Editor entfernt das Tag.

Welchen Ansatz Sie für Ihr Projekt wählen sollten

Haben Sie einen Button mit Textumschaltung und Blocksichtbarkeit, nutzen Sie eine Zustandsvariable. Drei Zeilen, transparentes Verhalten, triviales Debugging.

Gibt es mehrere Umschalter (Katalog, Einstellungspanel, Liste ausklappbarer Elemente), nutzen Sie ausschließlich .data(). Eine globale Variable für mehrere Buttons erzeugt eine Zustands-Race-Condition, die Sie länger debuggen, als Sie brauchen, um den Code nach Methode 2 zu schreiben.

Eine Kette mit drei oder mehr Schritten erfordert einen Zähler mit switch. Verkomplizieren Sie nicht mit booleschen Flags, was natürlicherweise mit Zahlen abbildbar ist.

Am wichtigsten: Wenn Sie in den Suchergebnissen einen Artikel mit .toggle(fn1, fn2) finden, schließen Sie den Tab. jQuery lebt, aber genau diese Methode wurde 2013 beerdigt.

Ihr Wissen zum schnellen Ausführen von JavaScript-Snippets können Sie in unserem Artikel über die Arbeit mit Snippets in Chrome DevTools auffrischen, was zum zügigen Testen von Code aus diesem Artikel nützlich ist.