S3.Blog

29 Марта 2024
A A A   RSS-лента
"Я знаю, что ничего не знаю, но многие не знают и этого". Сократ [?].

JavaScript: Скрытые блоки

Дата последнего изменения: 8 Сентября 2009
Метки статьи: Готовые решения, HTML, JavaScript, © Авторское
На многих сайта, особенно на форумах, вы, наверное, не раз видели скрытые блоки, которые раскрываются при клике на них.
Практически все они построены по одному принципу: внутри общего DIV находятся два других - один, это панель для нажатия, во-втором скрытый текст.


Похожие материалы:




Александрответить
давайте продолжим разговор по почте.
s3 [плюшка] smtp.ru
Миша (гость) • ответить
всем привет! всё работает! скажите, что нужно сделать, чтоб спустя заданный промежуток времени (ну например 5 сек) див автоматически опять становился скрытым?
Александрответить
добавить таймер в этом месте который скроет блок по истечении заданного времени

// если блок не виден, то показать его
if (child.style.display != 'block') {
child.style.display = 'block';
}
Миша (гость) • ответить
попробовал с setTimeout поэкспериментировать - не получается что-то!
Александрответить
а как именно пробовали?
Uncle Bob (гость) • ответить
Скажите а как сделать в этом пример смену изображений + и - (ну как на многих форумах в теге spoiler). Тоесть пока блок скрыт слева от надписи находится изображение +, а когда после нажатия открывается блок, то + меняется на -.
Александрответить
тут вставить <span>, например так:
<div>
<div onclick="openBlock(this);"><span>+</span>Нажмите, что бы раскрыть блок.</div>

а в коде добавить:

if (child.style.display != 'block') {
child.style.display = 'block';
//---
el.getElementsByTagName("span" )[0].innerHTML = '-';
//---
}

// иначе скрыть его
else {
child.style.display = 'none';
//---
el.getElementsByTagName("span" )[0].innerHTML = '+';
//---
}

код не проверял, но должно работать
Артём (гость) • ответить
Очень хороший скрипт. А как сделать так, что бы мог быть открыт всего лишь один спойлер?? То есть, При открытии нового, предыдущий автоматически закрывается. Очень нужно, помогите.
Александрответить
добавьте в начало скрипта, перед function openBlock(el) переменную, в которой будет храниться последний обработанный элемент, например:
var old_block_hidden = undefined;

а потом, перед child.style.display = 'block'; добавьте такую конструкцию:
if (old_block_hidden) {
old_block_hidden.style.display = 'none';
}
Александрответить
в итоге скрипт будет выглядеть так:
<script>
var old_block_hidden = undefined;
function openBlock(el) {
var kids = el.parentNode.childNodes;
for (var k = 0; k < kids.length; k++) {
var child = kids[k];
if (child && child.className == "this_block_is_hidden" {
if (child.style.display != 'block') {
if (old_block_hidden) {
old_block_hidden.style.display = 'none';
}
old_block_hidden = child;
child.style.display = 'block';
} else {
child.style.display = 'none';
}
}
}
}
</script>

 
 
  Имя *:   Решите пример *: =
 
Полужирный Курсив Подчеркнутый Перечеркнутый
 
Вставить изображение Сделать цитатой Вставить ссылку Вставить код

Вставить смайл
 
 

 



© S3.Blog: Если критикуешь, не предлагая решения проблемы, то ты становишься частью этой проблемы.