A Pen by Joshua Cottrell.

index.html

<div class='admin'><button type="button">Slide</button><span class="output"></span></div>
<div class="non-target part"></div>
<div class="target part">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec sapien scelerisque, hendrerit orci imperdiet, viverra ligula. In eu est mollis, tempor ex sit amet, cursus arcu. Quisque elementum dapibus lacus ac commodo. Integer pulvinar libero leo, eu hendrerit enim iaculis accumsan. Fusce vestibulum lacus ipsum, non porttitor tortor mattis et. Nulla a fringilla elit.</p>
</div>
<div class="non-target part"></div>

script.js

var tgl = function (el) {
    var bl = false;
    return function () {
      if (bl) {
        app.slide.up(el, 1000);
      } else {
        app.slide.down(el, 1000);
      }
      bl = !bl;
    }
  },
  tar = document.querySelector('.target');
$('button').on('click', tgl(tar));
var app = {};
app.slide = (function (win, doc) {
  var goal, step, el, mathFun, origHeight, endFun;
  function getFullHeight(el) { // wow, define hack:
    var ht;
    el.style.display = 'block';
    ht = el.offsetHeight;
    el.style.display = 'none';
    return ht;
  }
  function anim(time) {
      var ht = el.offsetHeight,
          nv = mathFun(ht + step, goal);
      el.style.height = nv + 'px';
      if (step > 0) { // expanding
          if (nv < goal) {
              win.requestAnimationFrame(anim);
          } else {
            if (endFun) {
              endFun();
            }
          }
      } else { // contracting
          if (nv > goal) {
              win.requestAnimationFrame(anim);
          } else {
              el.style.display = 'none';
              // return the height of the original so it will
              // make sense to scroll down next time
              el.style.height = origHeight + 'px';
            if (endFun) {
              endFun();
            }
          }
      }
  }
  function init(elm, over, fun, mFun, gHt) {
    el = elm;
    endFun = fun;
    goal = gHt;
    origHeight = el.offsetHeight;
    el.style.height = origHeight + 'px';
    el.style.overflow = 'hidden';
    el.style.display = 'block';
    step = (goal - origHeight) / (over / 1000) / 60;
    mathFun = mFun;
    win.requestAnimationFrame(anim);
  }
  return {
    down: function (elm, over, fun) {
        init(elm, over, fun, Math.min, getFullHeight(elm));
    },
    up: function (elm, over, fun) {
        init(elm, over, fun, Math.max, 0);
    }
  };
}(window, document));

simple-modern-slide-show-hide.md

Slider for hide / show

Simple slider for modern browsers, app.slider with down and up functions. Call like:

app.slide.down(domElement, 500, functionToDoAfterAnimation);

A Pen by Joshua Cottrell on CodePen.

License.

style.css

.admin{width:400px;}
button{margin:3px auto;text-align:center;padding: 6px 16px;display:block;border-radius:8px;color:white;letter-spacing:1px;font-size:13px;outline:0;}
.output{float:right;}
.part {width:400px;height:250px;background-color:goldenrod;}
.part.non-target{background-color:turquoise;}
.part.target{display:none;height:auto;}
p{margin:0;padding:7px;}