0

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 -->

Improve this question

1 Answer 1

Reset to default
1

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 }
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments