На многих сайта, особенно на форумах, вы, наверное, не раз видели скрытые блоки, которые раскрываются при клике на них.
Практически все они построены по одному принципу: внутри общего DIV находятся два других - один, это панель для нажатия, во-втором скрытый текст.
1. в стили для "DIV.this_block_is_hidden" добавьте это:
2. вот это:
if (child.style.display != 'block') {
child.style.display = 'block';
} else {
child.style.display = 'none';
}
замените на это:
if (child.style.display != 'block') {
openBlock_open(child, 1);
child.style.display = 'block';
child.style.height = '1px';
} else {
openBlock_close(child, 20); // <-- МАКС. ВЫСОТА БЛОКА
child.style.height = '20px'; // <-- МАКС. ВЫСОТА БЛОКА
}
3. добавьте это:
function openBlock_open(el, height) {
height += 1;
el.style.height = height + 'px';
if (height<20) { // <-- ДО КАКОЙ ВЫСОТЫ РАСКРЫВАТЬСЯ
setTimeout(function(){ openBlock_open(el, height); }, 10); // 10 - СКОРОСТЬ РАСКРЫТИЯ
}
}
function openBlock_close(el, height) {
height -= 1;
el.style.height = height + 'px';
if (height>1) {
setTimeout(function(){ openBlock_close(el, height); }, 10); // 10 - СКОРОСТЬ ЗАКРЫТИЯ
} else {
el.style.display = 'none';
}
}