CODEWITHSUNDEEP
jquery
manu
manu

Reputation: 103

how to flip card with jquery?

Basically I need something like this, but when I click on the next card, the previous one should flip back.

I tried with this code but it doesn't works well, could you help me?

When I click again on the card, It doesn't flip back.

$(document).ready(function(){
  $('.card-rotating').click(function(){
    var tab_id = $(this).attr('data-tab');

    $('.card-rotating').removeClass('flipped');

    $(this).addClass('flipped');
    $("#"+tab_id).addClass('flipped');
  });
    $('.backrote').click(function(){
      $('.card-rotating').removeClass('flipped');
     });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<!-- Grid column -->
<div class="col-lg-4 col-md-12">
  <!-- Rotating card -->
  <div class="card-wrapper">
    <div id="card-3" class="card-rotating effect__click text-center w-100 h-100" data-tab="tab-3">
      <!-- Front Side -->
      <div class="face front">
        <!-- Avatar -->
        <div class="avatar mx-auto white">
          <img src="https://mdbootstrap.com/img/Photos/Avatars/img (8).jpg" class="rounded-circle img-fluid" alt="Third sample avatar image">
        </div>
        <!-- Content -->
        <div class="card-body">
          <h4 class="font-weight-bold mt-1 mb-3">John Doe</h4>
          <p class="font-weight-bold dark-grey-text">Cirencester</p>
          <!-- Triggering button -->
          <a class="rotate-btn grey-text" data-card="card-3">
                                    <i class="fa fa-repeat grey-text"></i> Click here to rotate</a>
        </div>
      </div>
      <!-- Front Side -->
      <!-- Back Side -->
      <div class="face back">
        <!-- Content -->
        <div class="card-body">
          <iframe width="560" height="315" src="https://www.youtube.com/embed/woP_xcmpFrY" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
          <!-- Content -->
          <h4 class="font-weight-bold mt-4 mb-2">
            <strong>About me</strong>
          </h4>

          <!-- Triggering button -->
          <a class="rotate-btn backrote grey-text" data-card="card-3">
            <i class="fa fa-repeat grey-text"></i> Click here to rotate back</a>
        </div>
      </div>
      <!-- Back Side -->
    </div>
  </div>
  <!-- Rotating card -->
</div>
<!-- Grid column -->

Upvotes: 0

Views: 1237

Answers (1)

SliceThePi
SliceThePi

Reputation: 334

Looks like you're adding the flipped class to the currently-clicked card. This works great if the currently-clicked card doesn't have the flipped class already, but you're trying to remove the flipped class if the card already has it. Something like this should work:

if($(this).hasClass("flipped")) {
    $(this).removeClass("flipped");
}
else {
    //the current code inside your click function
}

Upvotes: 2

Related Questions