Revert flipping a DIV after clicking another one

Question

Take a look a this link. If you click on a product it flips and shows some information. You can flip all products at a given time.

I want to be able to only have one flipped product. Every time someone clicks another product, I want the previous one to flip back to its original appearance.

The html:

<div class="card effect__EFFECT">
  <div class="card__front">
    <span class="card__text">front</span>
  </div>
  <div class="card__back">
    <span class="card__text">back</span>
  </div>
</div>

The Javascript:

(function() {
  var cards = document.querySelectorAll(".card.effect__click");
  for ( var i  = 0, len = cards.length; i < len; i++ ) {
    var card = cards[i];
    clickListener( card );
  }

  function clickListener(card) {
    card.addEventListener( "click", function() {
      var c = this.classList;
      c.contains("flipped") === true ? c.remove("flipped") : c.add("flipped");
    });
  }
})();

The CSS:

.card.effect__click.flipped .card__front {
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
}

.card.effect__click.flipped .card__back {
  -webkit-transform: rotateY(0);
          transform: rotateY(0);
}

Answer 1

Try to remove 'flipped' class on card on click.

      function clickListener(card) {
           card.addEventListener( "click", function() {
               $('.card.effect__click').removeClass('flipped');
               var c = this.classList;
               c.contains("flipped") === true ? c.remove("flipped") : c.add("flipped");
           });
      }