Question

I want to dynamically resize an element upon clicking and have the ability to revert back to its original size upon a second click. I thought toggleClass could do the job, but apparently it didn’t:

$(document).ready(function() {
 $(this).click(function() {
  var new_size = // dynamically calculated value;
  $('.resize').css({'width': new_size, 'height': new_size});
  $(this).toggleClass('resize');
 });
});

Is there an easy way to work around this?

Answer 1

This line of code:

$('.resize').css({'width': new_size, 'height': new_size});

isn’t doing what you think it is. For your object to change size when you add a class, you need an actual CSS rule that specified the .resize class which won’t work with a dynamically calculated size.

This line of code is just setting a height and width on any object with the .resize class and isn’t doing anything to objects without that class. Thus, you could resize the object once (when it had the class) and never change it’s size again. It won’t toggle anything.

What I would suggest is that you save the old size and then you can restore it when you want to and also save the toggle value. jQuery’s .data() functions work well for saving this type of info:

$(document).ready(function() {
    $(this).click(function() {
        var this$ = $(this);
        // if it's currently at the dynamic size, restore the original size
        if (this$.data("dynamicallySized")) {
            $(this.css(this$.data("origSize"))
               .data("dynamicallySized", false);   // set flag that we're not dynamic
        } else {
            // save original size
            this$.data("origSize", {height: this$.height(), width: this$.width()})
              .css(new_size)
              .data(dynamicallySized", true);    // set flag that we're dynamically sized
        }
    });
});