Toggle Different Classes Sequentially

Question

Well i am trying to create a button that you can click more then 2 times..

This seems to work but only changes two classes.

$("#button").click(function() {
  $('.box1').toggleClass('box4, box2, box3');
});

.box1 {
  background-color: #000000;
  position: absolute;
  top: 100px;
  left: 100px;
  width: 100px;
  height: 100px;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.box2 {
  background-color: #000000;
  position: absolute;
  top: 100px;
  left: 100px;
  width: 100px;
  height: 100px;
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}

.box3 {
  background-color: #000000;
  position: absolute;
  top: 100px;
  left: 100px;
  width: 100px;
  height: 100px;
  clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
}

.box4 {
  background-color: #000000;
  position: absolute;
  top: 100px;
  left: 100px;
  width: 100px;
  height: 100px;
  clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
}

#buttox {
  position: absolute;
  top: 100px;
  left: 46%;
  right: 46%;
  height: 100px;
}

<div class="box1"></div>
<div id="buttox"><button id="button" class="butt1">Run Effect</button></div>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>

well I also tried without the commas. I've searched everywhere and cannot find away to toggle a button's class more then 2 times with jQuery

Answer 1

You cannot use .toggleClass() to step trough multiple classNames in a simple way, instead of classes, use data-* attributes.

• Use an array of the desired shape names
• Use data-* attribute to store the initial shape
• Use a current index variable, and increment it on click
• Use Modulo (Reminder) operator % to reset the index to 0 when necessary
• Use .attr("data-shape", idx) to change the data attribute value.
• DRY, don't repeat your styles that are not necessary

const $shape = $("#shape");
const shapes = ["box1", "box2", "box3", "box4"];
let tot = shapes.length;
let idx = 0;

const changeShape = () => {
  idx += 1;   // Increment current index
  idx %= tot; // Loopback to 0 when matches length
  $shape.attr("data-shape", shapes[idx]); // apply to data attribute
};

$("#button").on("click", changeShape);

#shape {
  background-color: #000000;
  position: absolute;
  top: 100px;
  left: 100px;
  width: 100px;
  height: 100px;
}

[data-shape="box1"] {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

[data-shape="box2"] {
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}

[data-shape="box3"] {
  clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
}

[data-shape="box4"] {
  clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
}

#buttox {
  position: absolute;
  top: 100px;
  left: 46%;
  right: 46%;
  height: 100px;
}

<div id="shape" data-shape="box1"></div>
<div id="buttox">
  <button id="button" class="butt1">Run Effect</button>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

If you really want to use classes you first need to remove the current class (index), increment the index and apply the new class:

const $shape = $("#shape");
const shapes = ["box1", "box2", "box3", "box4"];
let tot = shapes.length;
let idx = 0;

const changeShape = () => {
  $shape.removeClass(shapes[idx]); 
  idx += 1;
  idx %= tot;
  $shape.addClass(shapes[idx]); 
};

$("#button").on("click", changeShape);

#shape {
  background-color: #000000;
  position: absolute;
  top: 100px;
  left: 100px;
  width: 100px;
  height: 100px;
}

.box1 {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.box2 {
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}

.box3 {
  clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
}

.box4 {
  clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
}

#buttox {
  position: absolute;
  top: 100px;
  left: 46%;
  right: 46%;
  height: 100px;
}

<div id="shape" class="box1"></div>
<div id="buttox">
  <button id="button" class="butt1">Run Effect</button>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>