Expander animates a DIV with javascript. Exercise in less than 1 hour.

expander.js

var Expander = (function(){
  var Expander = function(id) {
    this._id = id;
    this._elem = elem = document.getElementById(id);
    this._step = 0;
    this._height = 0;
  };
  Expander.prototype.expand = function(incr,to) {
    var self = this;
    var animate = (incr>0 && this._height<to)
      || (incr<0 && this._height>to);
    if (animate) {
      this._step=(incr*1.1);
      this._height+=this._step;
      this._elem.setAttribute('style','height:'+this._height+'px;');
      window.requestAnimationFrame(function(){self.expand(self._step,to)});
    }
  };
  return Expander;
})();

var e = new Expander("expand");
document.getElementById('btnExpand').addEventListener('click',function(evt) {
  e.expand(3,100);
});

document.getElementById('btnReset').addEventListener('click',function(evt) {
  e.expand(-3,20);
});

index.html

<div id="expand">a</div>
<div id="test"></div>
<input type="button" value="expand" id="btnExpand"/>
<input type="button" value="reset" id="btnReset"/>
<script src="expander.js"></script>

site.css

#expand {
  background-color: #BBFFBB;
  height: 20px;
}