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

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

Дата последнего изменения: 8 Сентября 2009
Метки статьи: , , ,

На многих сайта, особенно на форумах, вы, наверное, не раз видели скрытые блоки, которые раскрываются при клике на них.
Практически все они построены по одному принципу: внутри общего DIV находятся два других - один, это панель для нажатия, во-втором скрытый текст.

Авторизоваться :: Зарегистрироваться :: Комментарии в RSS
Комментарии: все 6 5 4 3 2 1

16 Сентября 2011 (08:33:57)

Александр • ответить

давайте продолжим разговор по почте.
s3 [плюшка] smtp.ru

9 Апреля 2012 (11:27:42)

Миша (гость) • ответить

всем привет! всё работает! скажите, что нужно сделать, чтоб спустя заданный промежуток времени (ну например 5 сек) див автоматически опять становился скрытым?

9 Апреля 2012 (12:58:20)

Александр • ответить

добавить таймер в этом месте который скроет блок по истечении заданного времени


// если блок не виден, то показать его
if (child.style.display != 'block') {
	child.style.display = 'block';
}

9 Апреля 2012 (18:54:45)

Миша (гость) • ответить

попробовал с setTimeout поэкспериментировать - не получается что-то!

9 Апреля 2012 (22:51:22)

Александр • ответить

а как именно пробовали?

11 Января 2013 (14:32:28)

Uncle Bob (гость) • ответить

Скажите а как сделать в этом пример смену изображений + и - (ну как на многих форумах в теге spoiler). Тоесть пока блок скрыт слева от надписи находится изображение +, а когда после нажатия открывается блок, то + меняется на -.

14 Января 2013 (10:30:27)

Александр • ответить

тут вставить <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 = '+';
//---
			}

код не проверял, но должно работать

13 Сентября 2013 (21:20:48)

Артём (гость) • ответить

Очень хороший скрипт. А как сделать так, что бы мог быть открыт всего лишь один спойлер?? То есть, При открытии нового, предыдущий автоматически закрывается. Очень нужно, помогите.

15 Сентября 2013 (23:14:24)

Александр • ответить

добавьте в начало скрипта, перед function openBlock(el) переменную, в которой будет храниться последний обработанный элемент, например:

var old_block_hidden = undefined;

а потом, перед child.style.display = 'block'; добавьте такую конструкцию:

if (old_block_hidden) {
	old_block_hidden.style.display = 'none';
}

15 Сентября 2013 (23:16:44)

Александр • ответить

в итоге скрипт будет выглядеть так:

<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

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

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

Авторизоваться :: Зарегистрироваться :: Комментарии в RSS Комментарии: все 6 5 4 3 2 1

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

Авторизоваться :: Зарегистрироваться :: Комментарии в RSS
Комментарии: все 6 5 4 3 2 1