HTML Code

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>jQuery .toggleClass buttons</title>

  <style>

    body { font-family: sans-serif; padding: 16px; }

    .wrap { overflow: hidden; margin-top: 10px; }

    .wrap > div {

      float: left; width: 90px; height: 70px; margin: 0 8px 8px 0;

      padding: 8px; border: 1px solid #abc; font-size: 13px;

    }

    div.a { background: aqua; }

    div.b { background: burlywood; }

    div.c { background: cornsilk; }

    button { margin-right: 6px; margin-bottom: 6px; padding: 6px 12px; cursor: pointer; }

    .labels { clear: both; margin-top: 8px; font-family: monospace; font-size: 13px; }

  </style>

</head>

<body>

  <button type="button" class="a">toggle a</button>

  <button type="button" class="a b">toggle a b</button>

  <button type="button" class="a b c">toggle a b c</button>

  <button type="button" id="reset">reset</button>

  <div class="wrap">

    <div>Box 1</div>

    <div>Box 2</div>

    <div>Box 3</div>

  </div>

  <div class="labels" id="labels"></div>

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

  <script>

    var divs = $(".wrap").children();

    function showLabels() {

      var parts = [];

      divs.each(function(i) {

        parts.push("div" + (i + 1) + ": " + (this.className || "none"));

      });

      $("#labels").text(parts.join(" | "));

    }

    showLabels();

    $("button").not("#reset").on("click", function() {

      var tc = this.className;

      divs.toggleClass(tc);

      showLabels();

    });

    $("#reset").on("click", function() {

      divs.attr("class", "");

      showLabels();

    });

  </script>

</body>

</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery .toggleClass('a b c') — button toggles (Try It)