Card flip on click, close only with close box

231
August 06, 2018, at 7:10 PM

I've set up a card flip animation.

On click, the card flips over.

The "back" side of the card has a "close box."

I want the card to flip back over only when you click the close box on the backside.

Currently, I add a class the div with jquery, which "flips" the card.

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

See pen here: https://codepen.io/dtomasch/pen/GBBMEm

I'm sure I'll beed to change "toggleClass" to "addClass" but I'm not sure how to target the closeButton and tell it to affect the card.

Edit: I forgot to mention, there are multiple instances of .card on this page, which is why I used $this instead of referencing .card directly since it would obviously flip all the cards at one.

Answer 1

Another neat way is to use jQuery on method to attach a click event to the document and have a filter(selector).

$(document).on('click', ".card:not(.flipped)", function () { // ".card:not(.flipped)" means that if user click on .card element that doesn't have .flipped class
      $(".card").toggleClass('flipped');
  });
$(document).on('click', ".card .closeButton", function () {
      $(".card").toggleClass('flipped');
});

jQuery on method is bit more powerful given that you can add a click event trigger to an an element ahead of time i.e. before it appears on the document. FYI, I am not sure about whether this has performance penalties.

Live example: https://codepen.io/anon/pen/yqqzxw

Answer 2

Add a check to the .card listener and add the class only if it does not have the flipped class already. Then, add a listener to .closeButton to remove the flipped class from the closest .card. Make sure to stopPropagation to ensure the closeButton click doesn't propagate up to the .card listener:

$(".card").click(function () {
  if ($(this).hasClass('flipped')) return;
      $(this).addClass('flipped');
  });
$('.closeButton').on('click', function(e) {
  e.stopPropagation()
  $(this).closest('.card').removeClass('flipped');
});
Answer 3

Instead of targeting the whole of the card with a click listener, Target just the front. This way when the whole card is flipped the front of the card is now at the back allowing you to target the closeButton and clicking anywhere else in the card without being flipped .

$(".front").click(function() {
    $(".card").toggleClass('flipped');
});
$(".closeButton").click(function() {
    $(".card").toggleClass('flipped');
});

codepen example https://codepen.io/anon/pen/vaaePJ

Edit: for multiple instances change to.

$(".front").click(function () {
    $(this).parent().toggleClass('flipped');
});
$(".closeButton").click(function () {
    $(this).parent().parent().toggleClass('flipped');
});
Answer 4

First card click event will add only the flipped class if card doesn't have the flipped class.

closeButton click event will remove the flipped class from card elemnt and I use stopPropagation to stop click event from bubbling up and rise the card click.

$(".card").click(function () {
      if (!$(this).hasClass('flipped')) {
        $(this).addClass('flipped');
      }
  });
$('.closeButton').click(function(e){
  e.stopPropagation()
  $(this).closest('.card').removeClass('flipped');
})

codepen example

Rent Charter Buses Company
READ ALSO
gzip .js and .css files with appended version numbers

gzip .js and .css files with appended version numbers

I've added the following code to myhtaccess file and the gzip is working for all the filenames matched below

164
Remove a div in AMP-Animation on scroll down

Remove a div in AMP-Animation on scroll down

Help required from people working on Google-AMP

208
How to fast-load YouTube embeds keeping 1-click play on mobile phones also?

How to fast-load YouTube embeds keeping 1-click play on mobile phones also?

Embed codes like Labnol's described in this answer, require 2 clicks to play the embedded video from mobile phones, as Labnol clarifies from the start

141
How to set max_nesting_level without using xdebug?

How to set max_nesting_level without using xdebug?

The problem is, I want my production server to throw an error to https://sentryio/ if there is an error because of nesting level more than x step

172