Change Hover Interaction To Click For Touch Screen Devices

I have content revealing on hovering over another element on the page. On a touch screen this needs to be a click. I know that iOS and Android translate hover action on a link to a

Solution 1:

Okay, you're going to want to define your event (you can do it based on the no-touch class) before you do anything. From there, I just opted to toggle a class, which will still allow for your CSS transitions.

$('body').hasClass('no-touch') ? event = 'mouseenter mouseleave' : event = 'click';
//!$('body').hasClass('no-touch') ? event = 'mouseenter mouseleave' : event = 'click';

$('div div').on(event, function() {
    $(this).find('p + p').toggleClass('open');
});

Fiddle

You can see it both ways if you comment out the first line then uncomment the second.