jQuery .resizable(): How to return to original size after clicking the button?

Question

I'm trying to click a button to revert back to the original size of the element modified with .resizable. I tried:




  
    
    
    
    

    

    
  

  
    
    
      
        Stack Overflow resizable

But, $('.box').resizable('destroy'); just makes the resize icon disappear. I would like the element to go back to its original size when I click the button, just using jQuery, without JavaScript code. Is it possible to do that?

user_519413 · Answer

To do what you require you would need to set the height and width of the resized element back to their original values.

In the example shown in your question the default value of those properties would be auto as they have not been explicitly set in CSS anywhere else.

$(function() {
  $('.box').resizable();
  
  $('#btn').click(function() {
    $('.box').resizable('destroy').css({
      width: 'auto',
      height: 'auto'
    });
  });
});

.box {
  border: 2px solid #008cba;
  margin-top: 10px;
}






  Stack Overflow resizable

user_14527497 · Answer

$(function () {
    $(".box").resizable();
    $("#btn").click(function () {
        let instance = $(".box").resizable("instance");
        $(".box").width(instance.originalSize.width);
        $(".box").height(instance.originalSize.height);
        $(".box").resizable("destroy");
    });
});

.box {
    border: 2px solid #008cba;
    margin-top: 10px;
}







    
    
        Stack Overflow resizable

jQuery .resizable(): How to return to original size after clicking the button?

2 Answers