Сворачивание и разворачивание блока на javascript

Передо мной стояла задача написать плавное сворачивание и разворачивание блока на javascript, без использования библиотек jqery и ей подобных. Но эффект должен быть подобен jquery toggle, то есть должно быть плавное сворачивание блока и разворачивание блока, как вконтакте.

Решением данной задачи является мною написанная javascript функция, которая не занимает более 1,3кб.

Ниже предоставлен код и пример использования функции сворачивания/разворачивания div блоков.

js код сворачивания/разворачивания блока

function toggle(id)
{
        var e = document.getElementById(id);
        var dh = gh(id);
        var elems = e.getElementsByTagName('*');
        
        if (e.style.display == "none")
        {
                for(var i=0; i<elems.length; i++){vhe(elems[i], "hidden");}
        
                e.style.height="1px";
                e.style.display = "block";
                for(var i=0;i<=100;i+=5)
                {
                        (function()
                                {
                                        var pos=i;
                                        setTimeout(function(){e.style.height = (pos/100)*dh+1+"px";},pos*5);
                                }
                        )();
                }
                setTimeout(function(){for(var i=0; i<elems.length; i++){elems[i].style.visibility="visible";}},500);
                return true;
        }
        else
        {
                var lh=dh-1+"px";
                
                for(var i=0; i<elems.length; i++){vhe(elems[i], "hidden");}
                
                for (var i=100;i>=0;i-=5)
                {
                        (function()
                                {
                                        var pos=i;
                                        setTimeout(function()
                                        {
                                                e.style.height = (pos/100)*dh+"px";
                                                if (pos<=0)
                                                {
                                                        e.style.display = "none";
                                                        e.style.height=lh;
                                                }
                                        },1000-(pos*5));
                                }
                        )();
                }
                return true;
        }
        return false;
}

function vhe(obj, vh){obj.style.visibility=vh;}

function gh(id)
{
        var e = document.getElementById(id);
        if(e.style.display == "none")
        {
                e.style.visibility = "hidden";
                e.style.display = "block";
                dh = e.clientHeight||e.offsetHeight+5; // Высота
                e.style.display = "none";
                e.style.visibility = "visible";
        }
        else
        {
                dh = e.clientHeight||e.offsetHeight+5; // Высота
        }
        return dh;
}

Как видите в примере предоставлено три функции: toggle - отвечает за сворот/разворот блока, а остальные вспомогательные, одна определяет высоту div блока, другая показывает или скрывает дочерние элементы нужного блока.

Использование функции:

<div id="block" style="display:none;">
                <input type="text" value="логин"/>
                <input type="text" value="пароль"/>
                Текст блока...
                <input type="submit" value='Войти'/>
</div>
<div onClick="toggle('block');">Свернуть/Развернуть</div>

Как видите все просто, по нужному событию посылаем у функцию id блока и наслаждаемся красивым сворачиванием и разворачиванием блока на javascript

Дальше: Оптимизационная стратегия