При наведении на определенный блок, DIV, появляется скрытое сожержимое

[kismedia]

Всем привет!
Я не силен в javascript, но часто приходится находить, использовать разные полезные и интересные решения для своих сайтов.

На данный момент работаю над каталогом сайтов Инфо-Рунет.

Решил осуществить такую задачу, нигде не видел готового решения.

Сделать появление скрытого содержимого, по схеме на подобии блоков с вкладками (табами), пример.
Но, не при наведении на ссылку или по щелчку, а при наведении курсора на определенный блок, на подобии этого примера.

То есть при наведении на блок как бы вылезает снизу дополнительное скрытое содержимое. До этого его нет.

Надеюсь, я правильно сформулировал задачу и суть затеи понятна.

Может ли кто помочь в написании данного скрипта?
Или возможно есть какие то подобные решения?

Спасибо!

[yashka525]

не при наведении на ссылку

при наведении на блок как бы вылезает снизу дополнительное скрытое содержимое

То есть это как?

И еще, Вы просите готовый скрипт с нуля.

Это работа, и за нее обычно платят деньги.
Для таких сообщений предназначен раздел форума "Работа".

Если Вы все же хотите, чтобы Вам помогли - приложите какие-то усилия сами и задавайте вопросы по ходу дела. Просто посмотрите какой код на тех ссылках и попробуйте разобратся что к чему.

[kismedia]

Да, согласен, с нуля никто просто так писать не будет.

Подумал тут, а может через смену стиля блока просто реализовать.

<div onmouseover="this.className='blocksiteh'" onmouseout="this.className='blocksite'" >

При наведении сейчас вот цвет меняется, можно еще поиграть со стилем.

Если получится реализовать, так просто, напишу, покажу пример.

Спасибо!

[kismedia]

Нашел вот этот вариант: http://www.s3blog.org/skrytye-bloki.html

Поставил, изменил условие onclick на onmouseover

Вот полный код решения:

<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 onmouseover="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 onmouseover="openBlock(this);" class="toggle">Нажмите, что бы раскрыть блок.</div>

Здесь еще несколько DIV-ов!

<div class="this_block_is_hidden">это первый скрытый блок</div>

Как в данном случае правильно идентифицировать именно этот див ("this_block_is_hidden")?

Если Вы все же хотите, чтобы Вам помогли - приложите какие-то усилия сами и задавайте вопросы по ходу дела

Усилия приложил, задаю вопрос уже по ходу дела, можно сказать, завершение решения.

Спасибо!

[yashka525]

Как в данном случае правильно идентифицировать именно этот див ("this_block_is_hidden")?

Что-то не понял вопроса...

[Триви]

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

Первый элемент с таким же классом надо полагать?
В цикле по ключу:

if(k == 0) child.doSomething();

[kismedia]

Первый элемент с таким же классом надо полагать?

Ну получается да, первый элемент с классом "this_block_is_hidden" после текущего, в котором задан, собственно, задан onmouseover="openBlock(this);".

Я так понимаю, что в выше приведенном примере, открывается второй див, дочерний как бы?

[Jimmi]

<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 onmouseover="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>

Как изменить код, что-бы во время отведения курсора спрятанный блок прятался?

[winterpsv]

Как изменить код, что-бы во время отведения курсора спрятанный блок прятался?

а псевдокласами css почему не пользуешся ":hover" допустим
при наведении на блок visibility: visible; а без ховера visibility: hidden;

[Leon-on12]

Карточка товара при наведении
Так же подробно и долго писать лень. Но вам выговор.
Можете заметить что старожилы этого форума не откликнулись на ваш пост. Это потому что проблема гуглиться, это во перых, а во вторых потому что такая же темя не уплыла даже на вторую страницу.

Гуглиться эта тема по запросу "раскрывающееся меню"