w3resource

jQuery: Increase the size of a division when you click it

jQuery Fundamental - II : Exercise-69

Increase the size of a division when you click it.

Sample solution :

HTML Code :

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-git.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Increase the size of a div when you click it.</title>
</head>
<body>
<div class="div1">Click to increase the size</div>
<div class="div2">Click to increase the size</div>
</body>
</html>

CSS Code :

.div1 {
    width: 100px;
    height: 60px;
    background-color: #f33;
    color: white
  }
.div2 {
    width: 100px;
    height: 60px;
    background-color: #a14;
    color: white
  }

JavaScript Code :

$( "div" ).on( "click", function(){
  $( this ).css({
      width: function( index, value ) {
	        return parseFloat( value ) * 1.2;
			},
			height: function( index, value ) {
				return parseFloat( value ) * 1.2;
			}
	});
});

See the Pen jquery-fundamental-exercise-69 by w3resource (@w3resource) on CodePen.


Contribute your code and comments through Disqus.

Previous: Change the font weight and color of paragraphs on mouseenter and mouseleave.
Next: Retrieve the stored value from the division element.

What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.



Follow us on Facebook and Twitter for latest update.