How to build a simple card flip effect with JQuery

Question

I want to update the following code which should remove/add class on click of .card panel not on mouseleave which it does currently.

http://jsfiddle.net/GDdtS/9884/

$('.flip').click(function(){
    $(this).find('.card').addClass('flipped').mouseleave(function(){
        $(this).removeClass('flipped');
    });
    return false;
});

You could try having an if statement to check whether the element has the class flipped and if it does, remove it, else add it to the element. — Daniel Oram
– Daniel Oram, Commented Jul 22, 2015 at 11:45
your event working properly please check your css of flipped — Light
– Light, Commented Jul 22, 2015 at 11:46

Denis Thomas · Accepted Answer · 2015-07-22 14:30:08Z

4

You could check if the class is present and then decide conditionally what to do (add or remove a class as desired):

$('.flip').click(function(){
    var card = $(this).find('.card');
    if (!card.hasClass('flipped')) {
        card.addClass('flipped');
    } else {
        card.removeClass('flipped');
    }             
    return false;
});

If you want to use different buttons to flip the card you could use something like this:

$('.flip').click(function(){
   var card = $(this).find('.card');
   if (!card.hasClass('flipped')) {
      card.addClass('flipped');
   }
   return false;
});
$('.exit').click(function(){
  var card = $(this).closest('.exit').parents('.card');
  card.removeClass('flipped');
  return false;
});

This will flip back when the closing button on the back is clicked. It will get the close button and tries to find a parent with class .card to remove the .flipped class

 <div class="flip"> 
    <div class="card"> 
        <div class="face front"> 
            Front
        </div> 
        <div class="face back"> 
            <div class="exit">x</div>
            Back
        </div> 
    </div> 
</div>

I created a fork of your fiddle: http://jsfiddle.net/8n3gokua/1/

edited Jul 22, 2015 at 14:30

answered Jul 22, 2015 at 11:50

Denis Thomas

1,0221 gold badge8 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Markus Hayner Over a year ago

Thanks. I am using your code because I want to remove the class by clicking a div not to use as toggle

Luna Over a year ago

@MarkusHayner But this code has exactly the same result as using toggleClass. Adding the class if not already there, and removing it if it is already there is by definition toggling.

Markus Hayner Over a year ago

Yes but I am looking to remove the class from a button like when you have a div $('.exit').removeClass('flipped'); You know what I mean?

Markus Hayner Over a year ago

any idea how to do this? i don't want to click over all card class to remove the class

Denis Thomas Over a year ago

Where do you want to click instead?

|

Hitendra · Accepted Answer · 2015-07-22 11:45:40Z

1

You can try following code

 $('.flip').click(function(){
    $(this).find('.card').toggleClass('flipped');
    return false;
});

answered Jul 22, 2015 at 11:45

Hitendra

3393 silver badges17 bronze badges

Comments

PKa · Accepted Answer · 2015-07-22 11:46:02Z

0

You can use .toggleClass just like bellow:

$('.flip').click(function(){
    $(this).find('.card').toggleClass('flipped')
});

You can learn more from here.

answered Jul 22, 2015 at 11:46

PKa

3092 gold badges7 silver badges23 bronze badges

Comments

David Fells · Accepted Answer · 2015-07-22 17:57:59Z

0

Something like this?

$('.flip').bind("click mouseleave", function(){
    $(this).find('.card').toggleClass('flipped');
});

edited Jul 22, 2015 at 17:57

David Fells

6,8081 gold badge24 silver badges34 bronze badges

answered Jul 22, 2015 at 11:46

Alex Tartan

6,84410 gold badges37 silver badges47 bronze badges

Collectives™ on Stack Overflow

How to build a simple card flip effect with JQuery

4 Answers 4

7 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related