HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>.toggle three handlers</title>
  <style>
    body { font-family: sans-serif; padding: 16px; }
    #cycle { padding: 12px 20px; background: #8b5cf6; color: #fff; cursor: pointer; display: inline-block; border-radius: 6px; }
    #log { margin-top: 12px; color: #5b21b6; font-weight: bold; min-height: 1.4em; }
  </style>
</head>
<body>
  <div id="cycle">Click to cycle handlers</div>
  <div id="log">Handler 1 runs on clicks 1, 4, 7…</div>
  <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  <script>
    $("#cycle").toggle(
      function() { $("#log").text("Handler 1 — click 1, 4, 7…"); },
      function() { $("#log").text("Handler 2 — click 2, 5, 8…"); },
      function() { $("#log").text("Handler 3 — click 3, 6, 9…"); }
    );
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery .toggle(fn, fn, fn) — three handlers (Try It)