HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery .height setter</title>
  <style>
    div {
      width: 50px;
      height: 70px;
      float: left;
      margin: 5px;
      background: rgb(255,140,0);
      cursor: pointer;
    }
    body { font-family: sans-serif; }
    .hint { clear: both; padding-top: 90px; color: #64748b; font-size: 14px; }
  </style>
</head>
<body>
  <div></div>
  <div></div>
  <div></div>
  <p class="hint">Click any orange box once to shrink it to 30px height.</p>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
    $("div").one("click", function() {
      $(this).height(30).css({
        cursor: "auto",
        backgroundColor: "green"
      });
    });
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery .height(30) — setter on click (Try It)