I have this effect that is an image that when clicked show another image. It is a website for a photographer and show before the image with no post production and when clicked show the photo after post production.
My question is: why when I set toggle instead of click in html the other click doesn’t work like an if, so: if I click show photo “after post production”, if I I click another time show me the photo again “before post production”

HTML

  <div class="no-select imgBx col post-box" id="box_1">
                <img src="./assets/img/prima-dopo/ferrero-prima.jpg" onClick="swap(this)"
                  data-secondImg="./assets/img/prima-dopo/ferrero-dopo.jpg">

              </div>

JAVASCRIPT

/** 
 * Swap image on click with fade effect
 */




function swap(t) {
  // Create a new image element
  var newImg = new Image();

  // Set the source of the new image to the data-secondImg attribute
  newImg.src = t.getAttribute('data-secondImg');

  // Add a class to the new image for the fade-in effect
  newImg.classList.add('fade-in');
  setTimeout(() => {
    newImg.classList.add('active');

  }, 100);

  // Append the new image to the parent of the clicked image
  t.parentNode.appendChild(newImg);


  // Set a timeout to remove the old image after the fade-in is complete
  setTimeout(function () {
    // Remove the old image
    t.parentNode.removeChild(t);
  }, 2000); // Adjust the duration of the fade-in effect (in milliseconds)
}

I tried to change “onClick” in html with “onToggle” but doesn’t works