jQuery Problem - How to solve?

Question

I have a jQuery requirement like:

I have an Image. If I click it once its size will get reduced. If I again click it it will again resize.

Do we have any functionality to do it easily in jQuery? Or do I have to set a flag and then work on mouseclick? Something like

  $("#img1").click(function() {
      $("#img1").addClass("img1");
  });

Answer 1

jQuery toggle function might help.

In short=>

CSS:

.small{width: 10px;}

Javascript:

var makeSmall = function(){
         $(this).addClass("small");
     };

var makeNormal = function () {
     $(this).removeClass("small");
    };

$("#id").toggle(makeSmall, makeNormal);

Also - you might want to change CSS directly through jQuery:

var makeSmall = function(){
    $(this).css({'width' : '10px'});
}

P.s. Thinker's approach with toggleClass is cleaner.

Answer 2

Don't use toggle, when there is toggleClass function :)

$("#img1").click(function() {
  $("#img1").toggleClass("img1");
});