jQuery adding and removing classes issue on click function

Question

I have created a Jquery toggle class function which adds and removes the class flipped on a click eventListner. click here . At the moment this function is working when the user clicks on any of the elements wrapped in the .card class. I when want to restrict where the user can click, therefore only allow the click function to work when the user clicks the .active-btn .

I have made attempts to do this however once the card is flipped the active-btn class doesn't seem to work. by the looks of things the 'front div' is sitting on top of the 'back div Below is a snippet of my code …

$('.active-btn').click(function(e){
             e.preventDefault();
            $card = $(this).closest('.card');
            $('.flipped').not($card).removeClass('flipped');
            $card.toggleClass('flipped');
        });

Answer 1

I basically change the z-index to -1 on .flip .card .face , and

.flip .card {
  -webkit-transform-style: flat;
}

The problem with your original is that the perserved-3d keep changing the z-index which causing issues with the order.

z-index is canceled by setting transform(rotate)

Here is the post which goes in more detail.

Answer 2

You need to use the toggle element, right now the active btn will remove the class and won't add it after.

Do it like this:

$( ".active-btn" ).toggle(function() {
    e.preventDefault();
            $card = $(this).closest('.card');
            $('.flipped').not($card).removeClass('flipped');
            $card.toggleClass('flipped');
}, function() {
    e.preventDefault();
            $card = $(this).closest('.card');
            $('.flipped').not($card).addClass('flipped');
            $card.toggleClass('flipped'); );
});

Answer 3

use !hasClass (class has not exist) rather than not,

$('.active-btn').click(function(e){
         e.preventDefault();
        $card = $(this).closest('.card');
       if (!$('.flipped').hasClass($card)) {
                 removeClass('flipped');
                 $card.toggleClass('flipped');
            }
    });