Передо мной стояла задача написать плавное сворачивание и разворачивание блока на 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
Источник: sitear.ru