jQuery .toggle() Method — Alternating Click Handlers

What Is Click-Handler .toggle()?

Legacy .toggle(handler, handler [, handler…]) bound alternating click handlers (since 1.0). First click ran handler 1, second ran handler 2, then the cycle repeated. Removed in jQuery 1.9.

// Legacy (≤1.8 only — removed in 1.9)
$("#box").toggle(fn1, fn2)
$("#box").toggle(fn1, fn2, fn3)

// Modern replacements:
var n = 0;
$("#box").on("click", function () {
  (n++ % 2 === 0 ? fn1 : fn2).call(this);
});

$("#cell").on("click", function () {
  $(this).toggleClass("selected");
});

How to Use (Legacy) & Migrate

Read old code safely, then rewrite for jQuery 3.x.

1. Identify .toggle(fn, fn) — functions mean click cycling, not show/hide.
2. Count how many handlers cycle (2, 3, or more).
3. Replace with .on("click") + a counter, or .toggleClass() for class flips.
4. Unbind leftovers with .off("click") (there is no "toggle" event).

Pseudocode

function toggle(element, handlers[]):
    // removed API — for reading legacy code only
    i = 0
    on click(element):
        handlers[i](event)
        i = (i + 1) % handlers.length
        preventDefault()   // blocked links / buttons

// Modern:
on click(element):
    handlers[n % length](event)
    n++

Cheat Sheet

Keep the migration map next to legacy files.

Live Preview

Modern jQuery 3.x demos — equivalent behavior without the removed API.

Click Run to simulate alternating handlers.

jQuery Examples

Examples 1–3 show the removed API (labs use jQuery 1.8.3). Examples 4–5 are the jQuery 3.x replacements.

$("#target").toggle(
  function () {
    console.log("First handler for .toggle() called.");
  },
  function () {
    console.log("Second handler for .toggle() called.");
  }
);

First handler for .toggle() called.
Second handler for .toggle() called.
First handler for .toggle() called.

$("#cycle").toggle(
  function () { console.log("Handler 1"); },
  function () { console.log("Handler 2"); },
  function () { console.log("Handler 3"); }
);

Handler 1
Handler 2
Handler 3
Handler 1

$("td").toggle(
  function () {
    $(this).addClass("selected");
  },
  function () {
    $(this).removeClass("selected");
  }
);

1st click on A1 → selected
2nd click on A1 → not selected

var n = 0;
$("#target").on("click", function () {
  if (n % 2 === 0) {
    console.log("Handler A — 1st, 3rd, 5th…");
  } else {
    console.log("Handler B — 2nd, 4th, 6th…");
  }
  n++;
});

Handler A — 1st, 3rd, 5th…
Handler B — 2nd, 4th, 6th…
Handler A — 1st, 3rd, 5th…

$("td").on("click", function () {
  $(this).toggleClass("selected");
  console.log($(this).text() + ": " +
    ($(this).hasClass("selected") ? "on" : "off"));
});

A1: on
A1: off
B2: on

Performance Notes

A small counter is as cheap as the old helper — and you keep default click behavior under your control.

Key Takeaways