1

I want this div to fold from top to bottom. How can I do this? I have tried to move the top up while increasing the height but it gives an immediate increase in height as a result.

var div = document.getElementById("div");

div.onmouseover = function(){
      div.className = "expand";
  }
div.onmouseout = function(){
    div.className = "";
  }
div{
  position:absolute;
  top:50%;
  left:50%;
  height:50px;
  width:100px;
  background-color:#000000;
  transition:height 0.3s;
  }
div.expand{
  position:absolute;
  top:50%;
  left:50%;
  height:100px;
  width:100px;
  background-color:#000000;
  transition:height 0.3s;
  }
<div id="div"></div>
KSJ10
  • 66
  • 9

2 Answers2

3

You could do this, the thing is that you need to declare the bottom position instead of the top position.

var div = document.getElementById("div");

div.onmouseover = function() {
  div.className = "expand";
}
div.onmouseout = function() {
  div.className = "";
}
div {
  position: absolute;
  bottom: 50%;
  left: 50%;
  height: 50px;
  width: 100px;
  background-color: #000000;
  transition: height 0.3s;
}

div.expand {
  position: absolute;
  bottom: 50%;
  left: 50%;
  height: 100px;
  width: 100px;
  background-color: #000000;
  transition: height 0.3s;
}
<div id="div"></div>
Cata John
  • 1,371
  • 11
  • 19
0

For this you can use jQuery function. This makes code more readable and easier to debug.

For expanding

var makeBigger=50;
$("#div").css("width","+="+makeBigger);

For making shorter

$("#div").css("width","-="+makeBigger);

This adds 50 to current value.

magic-sudo
  • 1,206
  • 9
  • 15