Jquery Flip Card Troubleshooting

Question

I'm trying to create multiple flip cards with HTML and CSS, that flip using jQuery. The problem I'm running into is that currently I'm only able to flip the very first card.

Any advice to make the jQuery more global and able to click/flip each card would be greatly appreciated.

Here's the example I've been using: https://codepen.io/marcwilk/pen/JjdwKZR

HTML:

<div class="scene scene--card">
  <div class="card">
    <div class="card__face card__face--front">front</div>
    <div class="card__face card__face--back">back</div>
  </div>
</div>
<div class="scene scene--card">
  <div class="card">
    <div class="card__face card__face--front">front</div>
    <div class="card__face card__face--back">back</div>
  </div>
</div>
<p>Click card to flip.</p>

CSS:

body { font-family: sans-serif; }

.scene {
  width: 200px;
  height: 260px;
  border: 1px solid #CCC;
  margin: 40px 0;
  perspective: 600px;
}

.card {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
  transform-style: preserve-3d;
  transform-origin: center right;
  transition: transform 1s;
}

.card.is-flipped {
  transform: translateX(-100%) rotateY(-180deg);
}

.card__face {
  position: absolute;
  width: 100%;
  height: 100%;
  line-height: 260px;
  color: white;
  text-align: center;
  font-weight: bold;
  font-size: 40px;
  backface-visibility: hidden;
}

.card__face--front {
  background: red;
}

.card__face--back {
  background: blue;
  transform: rotateY(180deg);
}

JS:

var card = document.querySelector('.card');
card.addEventListener( 'click', function() {
  card.classList.toggle('is-flipped');
});

Thanks!

Answer 1

Firstly, your code is pure JavaScript, and not using jQuery.

Second, the problem is that you use document.querySelector('.card') which selects the first .card element.

Your solution is to use document.querySelectorAll('.card'); and loop through it to add the click event listener:

 var cards = document.querySelectorAll('.card'); cards.forEach(card => { card.addEventListener('click', function() { card.classList.toggle('is-flipped'); }) })

 body { font-family: sans-serif; } .scene { width: 200px; height: 260px; border: 1px solid #CCC; margin: 40px 0; perspective: 600px; } .card { position: relative; width: 100%; height: 100%; cursor: pointer; transform-style: preserve-3d; transform-origin: center right; transition: transform 1s; } .card.is-flipped { transform: translateX(-100%) rotateY(-180deg); } .card__face { position: absolute; width: 100%; height: 100%; line-height: 260px; color: white; text-align: center; font-weight: bold; font-size: 40px; backface-visibility: hidden; } .card__face--front { background: red; } .card__face--back { background: blue; transform: rotateY(180deg); }

 <div class="scene scene--card"> <div class="card"> <div class="card__face card__face--front">front</div> <div class="card__face card__face--back">back</div> </div> </div> <div class="scene scene--card"> <div class="card"> <div class="card__face card__face--front">front</div> <div class="card__face card__face--back">back</div> </div> </div> <p>Click card to flip.</p>