HTML Code

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>jQuery .toggleClass state</title>

  <style>

    p { margin: 4px; font-size: 16px; font-weight: bolder; cursor: pointer; padding: 6px; }

    .blue { color: blue; }

    .highlight { background: #fecaca; }

    span.count { font-size: 12px; color: #64748b; font-weight: normal; }

  </style>

</head>

<body>

  <p class="blue">Click me <span class="count">(clicks: 0)</span></p>

  <p class="hint" style="color:#64748b;font-size:14px;">Highlight appears only when click count is divisible by 3.</p>

  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

  <script>

    var $p = $("p").first();

    var count = 0;

    $p.on("click", function() {

      count++;

      $p.find(".count").text("(clicks: " + count + ")");

      $p.toggleClass("highlight", count % 3 === 0);

    });

  </script>

</body>

</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery .toggleClass(name, state) — every 3rd click (Try It)