S3.Blog

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

Вот типичный пример:

<div>
	<div onclick="openBlock('4efdea3a6c787b89')">Нажмите, что б раскрыть блок</div>
	<div id="4efdea3a6c787b89" style="display: none;">текст текст текст</div>
</div>

т.е. скрытый блок идентифицируется по id, что не всегда удобно.

Предлагаю свой вариант.
Итак, задача: нужен максимально универсальный вариант для открытия/закрытия скрытого блока без использования id и выдумывания уникальных имен.
Кроме id html-элемент можно идентифицировать, например, по имени используемого класса, вот к нему-то и привяжемся. Создадим класс this_block_is_hidden:

<style>
DIV.this_block_is_hidden {
	display: none;
}
</style>

и в итоге блоки будут такими:

<div>
	<div onclick="openBlock(this);">Нажмите, что бы раскрыть блок.</div>
	<div class="this_block_is_hidden">текст текст текст текст</div>
</div>

В блоке, на который надо нажать, мы указали событие openBlock(this), т.е. в функцию openBlock передаем ссылку на этот блок.

Теперь осталось написать функцию openBlock()

<script>
function openBlock(el) {
	// el.parentNode - взять родительский элемент
	// el.parentNode.childNodes - взять все дочерние элементы родителя
	// и положить их в массив kids
	var kids = el.parentNode.childNodes; 

	// прокрутить в цикле все элементы массива kids
	for (var k = 0; k < kids.length; k++) {
		var child = kids[k];

		// если имя класса текущего элемента равно this_block_is_hidden,
		// то выполнить ниже следующие инструкции
		if (child && child.className == "this_block_is_hidden") {

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

			// иначе скрыть его
			else {
				child.style.display = 'none';
			}
		}
	}
}
</script>

Вот практически и всё.
Немного разукрасим блоки стилями, добавим еще один скрытый блок и всё вместе получится вот так:

<style>
DIV.main_block {
	margin: 0px;
	background-color: #F9F9F9;
	border: 1px #000000 dashed;
	padding: 0px;
	color: #797979;
}
DIV.toggle {
	padding: 5px;
	cursor: pointer;
}
DIV.this_block_is_hidden {
	background-color: #FFFFFF;
	border-top: 1px #000000 dashed;
	padding: 5px;
	color: #000000;
	display: none;
}
</style>

<script>
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') {
				child.style.display = 'block';
			} else {
				child.style.display = 'none';
			}
		}
	}
}
</script>
<div class="main_block">
	<div onclick="openBlock(this);" class="toggle">Нажмите, что бы раскрыть блок.</div>
	<div class="this_block_is_hidden">это первый скрытый блок</div>
</div>

<br>

<div class="main_block">
	<div onclick="openBlock(this);" class="toggle">Нажмите, что бы раскрыть блок.</div>
	<div class="this_block_is_hidden">это второй скрытый блок</div>
</div>

В итоге у вас получится вот так: