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

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

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="/resources/demos/style.css">
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>

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

    </style>

    <script>
      $(function() {
        $('.box').resizable();
        $('#btn').click(function() {
          $('.box').resizable('destroy');
        });
      });

    </script>
  </head>

  <body>
    <button id='btn' type='button'>
      Click-me
    </button>
    <div class='box'>
      <h1 class='el1'>
        Stack Overflow resizable
      </h1>
    </div>
  </body>

</html>

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?

javascripthtmljquerycss


Solution 1:[1]

$(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;
}
<link rel="stylesheet"  href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css"/>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>

<body>
    <button id="btn" type="button">Click-me</button>
    <div class="box">
        <h1 class="el1">Stack Overflow resizable</h1>
    </div>
</body>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 dangerousmanleesanghyeon

Related Questions