How to increase the size of a division when you click it using jQuery ?

In this article, we will learn how to increase the size of a division when you click on it using jQuery.

1. Code:

$(".box").click(function () {

  // Select the clicked element
  let curr_elem = $(this);

  // Get the current dimensions
  let curr_width = curr_elem.width();
  let curr_height = curr_elem.height();

  // Set the new dimensions
  curr_elem.height(curr_height * increase_modifier);
  curr_elem.width(curr_width * increase_modifier);
});

2. Example:

Run the program to get the result.

<html>
<head>
  <script src= "https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <style>
    .container {
      display: flex;
    }
    .box {
      height: 100px;
      width: 100px;
      margin: 10px;
    }
    .red-bg {
      background-color: red;
    }
    .green-bg {
      background-color: green;
    }
    .yellow-bg {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <h1 style="color: green"> Soltuts.com </h1>
  <b> How to increase the size of a division when you click it using jQuery?</b>
  <p>Click on a div to increase its size</p>
  <div class="container">
    <div class="box red-bg"></div>
    <div class="box green-bg"></div>
    <div class="box yellow-bg"></div>
  </div>
  
  <script>
    $(".box").click(function () {
      // Select the element that is clicked on
      let curr_elem = $(this);
  
      // Set the amount to increase
      let increase_modifier = 1.5;
  
      // Get the current width of the element
      let curr_width = curr_elem.width();
  
      // Get the current height of the element
      let curr_height = curr_elem.height();
  
      // Use the same methods to set the new dimensions
      curr_elem.height(
        curr_height * increase_modifier
      );
      curr_elem.width(
        curr_width * increase_modifier
      );
    });
  </script>
</body>
</html>

JavaScript PHP