What use instead of toggleEvent for a .click function?

Question

Since jQuery 1.9, toggleEvent do not exists anymore, so I am trying to do something like: when someone click at .trigger, the div#map get bigger, when click again, div#map get smaller.

$(".trigger").click(function(){ 
  $("#map").animate({height: '400px'}, 550, function() { $(".trigger").text("see small");
  });
}, function(){
  $("#map").animate({height: '205px'}, 250, function() { $(".trigger").text("see big");
  });
});

If I use "toggle" in 1.8.3 it works fine, but I want to run in 1.9.1 and I don't know how.

Example of the code running in 1.8.3: http://jsfiddle.net/EZ9My/

You can easily create your own version of `toggleEvent`, as I have shown in this answer: http://stackoverflow.com/a/4911660/218196. — Felix Kling, Mar 29 '13 at 17:11

Joseph Lennox · Answer 1 · 2013-11-01T21:08:44.297

1

var isSmall = false;
var trigger = $(".trigger").click(function(){
    if (isSmall)
        $("#map").animate({height: '400px'}, 550, function() { trigger.text("see small"); });
    else
        $("#map").animate({height: '205px'}, 250, function() { trigger.text("see big"); });

    isSmall = !isSmall;
});

edited Nov 01 '13 at 21:08

answered Mar 29 '13 at 17:24

Joseph Lennox

3,202
1
27
25

score 0 · Accepted Answer · answered Mar 29 '13 at 17:28

Try this:

 $(".trigger").click(function(){
     if($("#map").css('height') == '400px'){
       $("#map").stop().animate({height:'205px'},550);
       $(this).text("see big");
     };
     if($("#map").css('height') == '205px'){
        $("#map").stop().animate({height:'400px'},250);
         $(this).text("see small");
     };
 });

jsFiddle: http://jsfiddle.net/EZ9My/1/

What use instead of toggleEvent for a .click function?

2 Answers2