How I can reduce the length with each left click and right click each increase it?

Question

Example:

div.my{width: 100%;}

<div class="my"></div>

left click:

div{width: 75%;}

Right click:

div{width: 100%;}

Answer 1

First of all, you should be careful using left click and right click in browsers. Not all browsers support right clicks. If you still want to implement this, the right click can be detected through the oncontextmenu event.

This Stack Overflow post has an example for you in JavaScript.

Basically, you are going to need to script a function that triggers when oncontextmenu occurs. You'll need to access the element via document.getElementById() or similar DOM traversal function. Then change the width via the element's style property in JS.

You cannot access the right click using only HTML and CSS.

Answer 2

Initialize the width of the target as 100 [As mentioned in the post].

Listen to the mousedown event and determine the mouse button clicked from the which attribute of the event passed to the callback function.

In the callback function depending on the mouse button clicked add or subtract the desired unit[25 in this case].

Apply the calculated width to the target.

Please refer the JSFiddle for working example.

var elasticDivWidth = 100;
$('.elastic-div').on('mousedown', function(e) { 
  e.preventDefault();
  if( (e.which == 1) ) {
    elasticDivWidth = elasticDivWidth - 25;
  } else if( (e.which == 3) ) {
    elasticDivWidth = elasticDivWidth + 25;
  }
  $(this).css('width', elasticDivWidth + '%');
}).on('contextmenu', function(e){
  e.preventDefault();
});

.elastic-div {
  height: 200px;
  background: cyan;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="elastic-div"></div>