What are some methods to boost height in the opposite direction?

Question

What are some methods to boost height in the opposite direction?

I'm looking for a way to make this div fold from top to bottom. How can I achieve this effect without the height increasing abruptly?

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

box.onmouseover = function(){
      box.className = "expand";
  }
box.onmouseout = function(){
    box.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="box"></div>

javascript html css

Answer 1

Answer №1

If you want to achieve this effect, make sure to specify the bottom position rather than the top position.

let container = document.querySelector("#container");

container.onmouseover = function() {
  container.classList.add("expand");
}
container.onmouseout = function() {
  container.classList.remove("expand");
}

#container {
  position: absolute;
  bottom: 50%;
  left: 50%;
  height: 50px;
  width: 100px;
  background-color: #000000;
  transition: height 0.3s;
}

#container.expand {
  position: absolute;
  bottom: 50%;
  left: 50%;
  height: 100px;
  width: 100px;
  background-color: #000000;
  transition: height 0.3s;
}

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

Answer 2

If you want to achieve this effect, make sure to specify the bottom position rather than the top position.

let container = document.querySelector("#container");

container.onmouseover = function() {
  container.classList.add("expand");
}
container.onmouseout = function() {
  container.classList.remove("expand");
}

#container {
  position: absolute;
  bottom: 50%;
  left: 50%;
  height: 50px;
  width: 100px;
  background-color: #000000;
  transition: height 0.3s;
}

#container.expand {
  position: absolute;
  bottom: 50%;
  left: 50%;
  height: 100px;
  width: 100px;
  background-color: #000000;
  transition: height 0.3s;
}

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

Answer 3

Answer №2

To simplify this task, utilize the jQuery function. It enhances code readability and facilitates debugging.

For expanding elements

var increaseSize = 50;
$("#element").css("width", "+=" + increaseSize);

For reducing size

$("#element").css("width", "-=" + increaseSize);

This operation increments the current value by 50.

Answer 4

To simplify this task, utilize the jQuery function. It enhances code readability and facilitates debugging.

For expanding elements

var increaseSize = 50;
$("#element").css("width", "+=" + increaseSize);

For reducing size

$("#element").css("width", "-=" + increaseSize);

This operation increments the current value by 50.

What are some methods to boost height in the opposite direction?

Answer №1

Answer №2

Similar questions

Error: Cannot access 'addEventListener' property of null in Chrome Extension due to TypeError

Struggling to figure out how to properly shuffle my deck of cards array in JavaScript. Can't seem to grasp how to pass the array correctly

A method for adding a strikethrough to text within a list item upon clicking a button

Using jQuery validation to verify that a minimum of one radio button holds a true value

Working with string interpolation in SQLite3 and Nodejs

Bus Boy's employment record shows no termination

Which file is the optimal placement for the Bootstrap directory: 'header.php' or 'function.php'?

choose a row from the list

Avoid updating numerous divs when hovering over them

Establish a trigger in mongoDB that monitors changes in document values and triggers an email notification

Prevent the footer from overlapping with the text when printing several pages

What is the best way to share specific links on LinkedIn articles?

Issue with data type not refreshing in mySQL Workbench

What is the best way to modify Mega Menus using JavaScript?

Is there a method for manually determining a map's LatLngBound based on the center point and zoom level

Streamlined method for extracting information from div elements sourced from a webpage

Binding text inputs in Laravel Vue.js does not work

Passport.js is throwing an error due to an unrecognized authentication

Determine the height of the left div, which is set to auto, and apply the same height to the right div, which has overflow set

Utilizing arrays in ejs with HTML elements