Card flip on click, close only with close box

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

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');
});

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');
});

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