click on the increase div click again decrease

Question

Guys if you can help me in this question I would like to click a div that is fixed in the footer and it increase and then click again and it decrease, how do I do this?

Answer 1

You should include some of the code of what you tried to do, but here’s a very simple example to give you at least an idea of how to get started:

HTML:

<div id="div"></div>

CSS:

#div {
    height: 100px;
    width: 100px;
    background-color: red;
}

Javascript:

var big = true;

$('#div').click(function() {
  if(big) {
    big = false;
    $(this).css('height', '50px');
    $(this).css('width', '50px');
  } else {
    big = true;
    $(this).css('height', '100px');
    $(this).css('width', '100px');
  }


});

Javascript using Animation:

var big = true;

$('#div').click(function() {
  if(big) {
    big = false;
    $(this).animate({
      height : "50px",
      width : "50px"
    }, 1000);
  } else {
    big = true;
    $(this).animate({
      height : "100px",
      width : "100px"
    }, 1000);
  }


});

To see you live: https://codepen.io/leofontes/pen/bBrVbZ

Like I said, very simple, to help you as a beginner.