Flipping all cards, but want to flip one by one Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of Flipping all cards, but want to flip one by one without wasting too much if your time.

The question is published on by Tutorial Guruji team.

I am trying to flip these cards one by one, but they are flipping all together.

I believe I am missing something on my javaScript.

On the original code I am using images in front and an unordered list in back, I tried to resume it here writing only “Front” and “Back”.

$(".flip").click(function() {
  $(".card").toggleClass("flipped");
});
.card-container {
  display: flex;
}
.card {
  width: 300px;
  height: 6rem;
  margin: 30px;
  transform-style: preserve-3d;
  transition: transform 1s;
}

.card figure {
  margin: 0;
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.card figure figcaption {
  padding: 0 1rem;
  backface-visibility: hidden;
  border: 1px solid gray;
}

.card button.flip {
  position: absolute;
  right: 1rem;
  margin: 0;
}

.card button.flip {
  top: 1rem;
}

.card .back {
  transform: rotateY( 180deg);
}

.card.flipped {
  transform: rotateY( 180deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card-container">
  <div class="card">
    <figure class="front">
      <figcaption>
        <h2>FRONT 1</h2>
        <button class="flip">+</button>
      </figcaption>
    </figure>
    <figure class="back">
      <figcaption>
        <h2>BACK 1</h2>
        <button class="flip">-</button>
      </figcaption>
    </figure>
  </div>

  <div class="card">
    <figure class="front">
      <figcaption>
        <h2>FRONT 2</h2>
        <button class="flip">+</button>
      </figcaption>
    </figure>
    <figure class="back">
      <figcaption>
        <h2>BACK 2</h2>
        <button class="flip">-</button>
      </figcaption>
    </figure>
  </div>
</div>

Do you guys know what am I doing wrong?

Answer

Instead of flipping all elements of class .card, you can flip only the one that the button is in, using the .closest() method (which traverses UP the DOM tree until it finds an element with the specified class).

$(this).closest(".card").toggleClass("flipped");

$(".flip").click(function() {
  $(this).closest(".card").toggleClass("flipped");
});
.card-container {
  display: flex;
}
.card {
  width: 300px;
  height: 6rem;
  margin: 30px;
  transform-style: preserve-3d;
  transition: transform 1s;
}

.card figure {
  margin: 0;
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.card figure figcaption {
  padding: 0 1rem;
  backface-visibility: hidden;
  border: 1px solid gray;
}

.card button.flip {
  position: absolute;
  right: 1rem;
  margin: 0;
}

.card button.flip {
  top: 1rem;
}

.card .back {
  transform: rotateY( 180deg);
}

.card.flipped {
  transform: rotateY( 180deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card-container">
  <div class="card">
    <figure class="front">
      <figcaption>
        <h2>FRONT 1</h2>
        <button class="flip">+</button>
      </figcaption>
    </figure>
    <figure class="back">
      <figcaption>
        <h2>BACK 1</h2>
        <button class="flip">-</button>
      </figcaption>
    </figure>
  </div>

  <div class="card">
    <figure class="front">
      <figcaption>
        <h2>FRONT 2</h2>
        <button class="flip">+</button>
      </figcaption>
    </figure>
    <figure class="back">
      <figcaption>
        <h2>BACK 2</h2>
        <button class="flip">-</button>
      </figcaption>
    </figure>
  </div>
</div>
We are here to answer your question about Flipping all cards, but want to flip one by one - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji