Question

Basically this function is meant to store the height value of the element that calls it and then if that height matches the element it will expand its height by 200px and if it does not match the stored value it restores that value (in essence shrinking the element container). How do I get it to read from the external style sheet to get the var heightVal = parseInt(boxStyle.height);?

function expand(e){
  var box = document.getElementById(e);
  var boxStyle = box.style;
  var heightVal = parseInt(boxStyle.height);

  if(boxStyle.height == heightVal){
    boxStyle.height = heightVal + 200 +'px';
  }
  else{
    boxStyle.height = heightVal;
  }

}

Answer 1

This is my revised answer… This code allows for the function to be used universally to re-size any elements height regardless of whether you want it to start minimized or maximized and/or whether you want it to expand or collapse. I developed this function as an improvement on the answer I had previously written. This is actually a result of another function I have been working on to change the CSS class to allow for animation without using either javascript nor jquery. I now have both functions working and universal!

The parameters are pretty straight forward… box represents the element you want to resize, hNew represents the height you want to resize it to (can be larger or smaller than the current height of the element and the function still works).

function resize_height(box, hNew){
  if(box.style.height != hNew || box.style.height == box.old_height){
    box.old_height = box.style.height
    box.style.height = hNew;
  }
  else{
    box.style.height = box.old_height;
  }
}