Hammer.js with .toggleClass function

Question

I'm trying to use hammer.js to toggle a class on tap event. It's essentially a card that will flip from front to back when tapped.

My original code before implementing hammer.js was:

$('#audioPanelContainer').click(function({
  $(this).find('#audioCard').toggleClass('flipped');
});

This worked just fine with both click and touch events until I started using hammer.js for other things. Now it works only on click. My question is, how can I edit this to make it hammer.js friendly?

edit: I have tried this script and it does not work at all.

$('#audioPanelContainer').hammer().on("tap", function(event) { 
    $(this).find('#audioCard').toggleClass("flipped"); 
});

Answer 1

You should attach a hammer's tap event handler on your container. Check out this fiddle for an example.