Slide up and down

Just a quick test to find out how to so it

by Rupesh Kokal

HTML

<div id="slide-me">Now you see me...</div>
<p><button id="slider">Slide the box</button></p>

CSS

div {
    background-color: #F00;
    height: 300px;
    overflow: hidden;
    width: 300px;
}

JavaScript

// Brutally stolen from http://www.hesido.com/web.php?page=javascriptanimation
// using such wit and cunning that the original author, Hesido, will never find out - mwa ha ha ha ha!
function easeInOut(minValue, maxValue, totalSteps, actualStep, power) {
    var delta = maxValue - minValue,
        step = minValue + (Math.pow(((1 / totalSteps) * actualStep), power) * delta);
    return Math.ceil(step);
}

function doHeightChange(elem, startHeight, endHeight, steps, intervals, power) {
    var actStep = 0;
    if (elem.heightChangeMem) {
        clearInterval(elem.heightChangeMem);
    }
    elem.heightChangeMem = setInterval(function () {
        elem.currentHeight = easeInOut(startHeight, endHeight, steps, actStep, power);
        elem.style.height = elem.currentHeight + 'px';
        actStep += 1;
        if (actStep > steps) {
            clearInterval(elem.heightChangeMem);
        }
    }, intervals);
}

function slideUp(elem) {
    doHeightChange(elem, 300, 0, 20, 10, 0.5);
}

function slideDown(elem) {
    doHeightChange(elem, 0, 300, 20, 10, 0.5);
}

window.onload = function () {
    document.getElementById('slider').onclick = function () {
        var slideMe = document.getElementById('slide-me');
        if (slideMe.style.height === '0px') {
            slideDown(slideMe);
        } else {
            slideUp(slideMe);
        }
    };
};