CODEWITHSUNDEEP
javascriptjquery
Becky
Becky

Reputation: 5585

Toggle on touch and only show on click

There is a image and another div.

<img src="clock.jpg" id="date"/>
<div id="toggleDIV"> toggleDIV </div>

How do I make #toggleDIV' show every time the button is clicked but to toggle view when it's touched? So on a touch device I want the button to work as and ON/OFF button but on none touch devices I want it to work only as ON.

$("#date").click(function(){
  if ($('#toggleDIV').css('display')=='none')
    $('#toggleDIV').fadeIn();
});

Upvotes: 2

Views: 813

Answers (1)

Jacques Marais
Jacques Marais

Reputation: 2756

Try something like this:

$("#date").click(function(){
    $('#toggleDIV:hidden').fadeIn();
});
$("#date").on("touchstart", function(){
    $("#date").off("click");
    $('#toggleDIV').fadeToggle();
});

How it works: When you click the button the div will always show, but when you touch the button, the click event handler will be removed from the button and it will instead run the touch handler.

JSFiddle

Note: See @Rory's comment why not to use browser sniffing.

Upvotes: 1

Related Questions