S3.Blog

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

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

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

Нажмите, что бы раскрыть блок.
это первый скрытый блок

Нажмите, что бы раскрыть блок.
это второй скрытый блок



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




Александрответить
в div добавьте это:
onmouseout="openBlock(this, true);"

а в javascript это: function openBlock(el) {
замените на это: function openBlock(el, is_hide) {

а это: if (child.style.display != 'block') {
замените на это: if ((! is_hide) && (child.style.display != 'block')) {
Сергей (гость) • ответить
Добрый вечер. Подскажите пожалуйста, как реализовать так, чтобы открывал не дочерний div, а в другом месте на сайте. У меня такая структура кода:

<td class="minfo"> <i onclick="openBlock(this);" class="fa fa-chevron-down"></i></div></td>
</tr>
<tr><div class="this_block_is_hidden">это первый скрытый блок</div></tr>


Следовательно, скрипт не может его открыть.

В JavaScript поверхностно, поэтому был бы благодарен за помощь Спасибо)
Александрответить
тут без id не обойтись, в вашем случае это будет примерно так:
<tr><td class="minfo">
<i onclick="openBlock(document.getElementById('my_menu_1'));" class="fa fa-chevron-down"></i>
</td></tr>
<tr><td>
<div><div id="my_menu_1" class="this_block_is_hidden">это первый скрытый блок</div></div>
</td></tr>

Сергей (гость) • ответить
Спасибо за ответ. У меня порядка 50 блоков (всегда разное значение) раскрывается на одной странице. Ну что поделать, буду привязывать id.

Спасибо еще раз)
Сергей (гость) • ответить
Есть возможно готовое (не сильно грамоздкое) решение в виде формирования ID у блок, как в примере в вашем посте?

<div>
<div onclick="openBlock('4efdea3a6c787b89')">Нажмите, что б раскрыть блок</div>
<div id="4efdea3a6c787b89" style="display: none;">текст текст текст</div>
</div>
Александрответить
сформировать ID случайным образом не проблема, но кто их будет назначать какой-куда и за что отвечает? поэтому, в вашем случае, к сожалению, только ручная работа.

вы можете только облегчить конструкцию немного изменив скрипт:

<tr><td class="minfo">
<i onclick="openBlock('my_menu_1');" class="fa fa-chevron-down"></i>
</td></tr>
<tr><td>
<div id="my_menu_1" class="this_block_is_hidden">это первый скрытый блок</div>
</td></tr>


и измените скрипте на это:
<script>
function openBlock(el_id) {
var child = document.getElementById(el_id);
if (child) {
// если блок не виден, то показать его
if (child.style.display != 'block') {
child.style.display = 'block';
}
// иначе скрыть его
else {
child.style.display = 'none';
}
}
}
</script>
Сергей (гость) • ответить
Просто количество блоков все время разное, у схожих сайтов с моей тематикой формируется через ID, видимо и мне придется также поступать)

пример:


Я не особо в javascript, поэтому и спрашивал ссылочку на какой нибудь интересный пример для реализации открывания блоков через ID
Александрответить
дык, я вам и дал простой пример открывания без десятков килобайт кода в виде jQuery и прочего
михаил (гость) • ответить
Как сделать чтобы при клике на другой блок предыдущий закрывался?
Александрответить
посмотрите комментарий от 3 Февраля 2011

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

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

 



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