JavaScript: Скрытые блоки
Дата последнего изменения: 8 Сентября 2009
Метки статьи: Готовые решения, HTML, JavaScript, © Авторское
Метки статьи: Готовые решения, HTML, JavaScript, © Авторское
Похожие материалы:
18 Июня 2010 (10:47:54)
drAculenok
(гость)
• ответить
Спасибо очень помогло!
25 Ноября 2010 (11:25:43)
Антон
(гость)
• ответить
Здорово, все гениальное просто, сколько я уже ищу нормальное решение.
Реализовал тут:
Сибирский интернет аукцион
Реализовал тут:
Сибирский интернет аукцион
2 Февраля 2011 (23:41:40)
Леха Г.
(гость)
• ответить
а есть вариант, когда div всегда открывается в заданном месте страницы и при этом, когда нажимаем второй блок, первый, уже открытый до этого, скрывается?
готового примера нет, но в этом нет ничего сложного.
впишите в начале скрипта, перед function openBlock(el), переменную, хранящую div-элемент, например:
div_view = undefined;
и в условии, где открывается/закрывается блок, напишите так:
впишите в начале скрипта, перед function openBlock(el), переменную, хранящую div-элемент, например:
div_view = undefined;
и в условии, где открывается/закрывается блок, напишите так:
if (child && child.className == "this_block_is_hidden" ) {
if (child.style.display != 'block') {
if (div_view) {
div_view.style.display = 'none';
}
div_view = child;
child.style.display = 'block';
} else {
child.style.display = 'none';
}
}
3 Марта 2011 (00:15:28)
Андрей
(гость)
• ответить
Подскажите, пожалуйста, можно ли сделать так, что бы при наведении курсора на определенный блок, плавно открывался скрытый блок?
можно, для этого вместо onclick поставьте onMouseOver, ну и пошаманьте с openBlock()
самое простое, это назначить изначально скрытому диву высоту в 1px, а потом в цикле, при наведении мыши, эту высоту увеличить до нормального размера, а при onMouseOut наоборот - в цикле уменьшить высоту с нормальной до 1 пиксела
самое простое, это назначить изначально скрытому диву высоту в 1px, а потом в цикле, при наведении мыши, эту высоту увеличить до нормального размера, а при onMouseOut наоборот - в цикле уменьшить высоту с нормальной до 1 пиксела
14 Сентября 2011 (07:04:17)
Юрий
(гость)
• ответить
можно, для этого вместо onclick поставьте onMouseOver, ну и пошаманьте с openBlock()
самое простое, это назначить изначально скрытому диву высоту в 1px, а потом в цикле, при наведении мыши, эту высоту увеличить до нормального размера, а при onMouseOut наоборот - в цикле уменьшить высоту с нормальной до 1 пиксела
самое простое, это назначить изначально скрытому диву высоту в 1px, а потом в цикле, при наведении мыши, эту высоту увеличить до нормального размера, а при onMouseOut наоборот - в цикле уменьшить высоту с нормальной до 1 пиксела
Здравствуйте!
Вот мне как раз именно это и требуется, я заменил onclick на onmouseover, но:
[HTML]<div onmouseover="openBlock(this);" class="toggle">Нажмите, что бы раскрыть блок.</div>[/HTML]
[COLOR="DarkRed"]Здесь еще несколько DIV-ов![/COLOR]
[HTML]<div class="this_block_is_hidden">это первый скрытый блок</div>[/HTML]
Я так понимаю, что в выше приведенном примере, открывается второй див, дочерний как бы?
Поэтому у меня условие не работает?
14 Сентября 2011 (20:48:27)
Юрий
(гость)
• ответить
Спасибо, что ответили.
Решил остановится на onclick, взял Ваш код, прикрутил, вроде все норм.
Собственно мой сайт: Инфо-Рунет
При нажатии на кнопку, блок "добавить в закладки", справа под каждым сайтом.
Появляется скрытый блок, собственно закладки.
Можно посмотреть исходник страницы.
С использованием onmouseover ничего не получилось, правда и блок на котором был задан onmouseover был выше, это текст, описание сайта.
Вот планировалось, что при наведении на него откроются закладки, а кнопки не будет.
В любом случае, меня устраивает и этот вариант.
Большое спасибо!
Решил остановится на onclick, взял Ваш код, прикрутил, вроде все норм.
Собственно мой сайт: Инфо-Рунет
При нажатии на кнопку, блок "добавить в закладки", справа под каждым сайтом.
Появляется скрытый блок, собственно закладки.
Можно посмотреть исходник страницы.
С использованием onmouseover ничего не получилось, правда и блок на котором был задан onmouseover был выше, это текст, описание сайта.
Вот планировалось, что при наведении на него откроются закладки, а кнопки не будет.
В любом случае, меня устраивает и этот вариант.
Большое спасибо!
15 Сентября 2011 (20:54:32)
Юрий
(гость)
• ответить
Спасибо!
Тоесть этот скрипт отвечает за "наведение по блокам", когда он меняет цвет и появляется надпись подробнее, так же заметил что мигает заголовок записи, правильно? Смотрится неплохо.
Возможно это можно применить к моему каталогу, Вы его смотрели, может по этому поводу у Вас есть советы или предложения?
Я, вообще уже использую изменение стиля при наведении, вот так:
<div onmouseover="this.className='blocksiteh'" onmouseout="this.className='blocksite'" >
Но пока еще не опредилился с самим стилем.
Тоесть этот скрипт отвечает за "наведение по блокам", когда он меняет цвет и появляется надпись подробнее, так же заметил что мигает заголовок записи, правильно? Смотрится неплохо.
Возможно это можно применить к моему каталогу, Вы его смотрели, может по этому поводу у Вас есть советы или предложения?
Я, вообще уже использую изменение стиля при наведении, вот так:
<div onmouseover="this.className='blocksiteh'" onmouseout="this.className='blocksite'" >
Но пока еще не опредилился с самим стилем.
9 Апреля 2012 (11:27:42)
Миша
(гость)
• ответить
всем привет! всё работает! скажите, что нужно сделать, чтоб спустя заданный промежуток времени (ну например 5 сек) див автоматически опять становился скрытым?
11 Января 2013 (14:32:28)
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 = '+';
//---
}
код не проверял, но должно работать
13 Сентября 2013 (21:20:48)
Артём
(гость)
• ответить
Очень хороший скрипт. А как сделать так, что бы мог быть открыт всего лишь один спойлер?? То есть, При открытии нового, предыдущий автоматически закрывается. Очень нужно, помогите.
добавьте в начало скрипта, перед function openBlock(el) переменную, в которой будет храниться последний обработанный элемент, например:
а потом, перед child.style.display = 'block'; добавьте такую конструкцию:
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>
13 Января 2014 (15:21:44)
Илья
(гость)
• ответить
<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" || child && child.className == "this_block_is_hidden-1" || child && child.className == "this_block_is_hidden-2" {
if (child.style.display != 'block') {
child.style.display = 'block';
} else {
child.style.display = 'none';
}
}
}
}
</script>
как сделать, что бы плавно открывался? Помоги те плиз. Уже 2 день мучаюсь...
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" || child && child.className == "this_block_is_hidden-1" || child && child.className == "this_block_is_hidden-2"
{if (child.style.display != 'block') {
child.style.display = 'block';
} else {
child.style.display = 'none';
}
}
}
}
</script>
как сделать, что бы плавно открывался? Помоги те плиз. Уже 2 день мучаюсь...
ну, как-то так:
1. в стили для "DIV.this_block_is_hidden" добавьте это:
2. вот это:
замените на это:
3. добавьте это:
1. в стили для "DIV.this_block_is_hidden" добавьте это:
overflow: hidden;
2. вот это:
if (child.style.display != 'block') {
child.style.display = 'block';
} else {
child.style.display = 'none';
}
замените на это:
if (child.style.display != 'block') {
openBlock_open(child, 1);
child.style.display = 'block';
child.style.height = '1px';
} else {
openBlock_close(child, 20); // <-- МАКС. ВЫСОТА БЛОКА
child.style.height = '20px'; // <-- МАКС. ВЫСОТА БЛОКА
}
3. добавьте это:
function openBlock_open(el, height) {
height += 1;
el.style.height = height + 'px';
if (height<20) { // <-- ДО КАКОЙ ВЫСОТЫ РАСКРЫВАТЬСЯ
setTimeout(function(){ openBlock_open(el, height); }, 10); // 10 - СКОРОСТЬ РАСКРЫТИЯ
}
}
function openBlock_close(el, height) {
height -= 1;
el.style.height = height + 'px';
if (height>1) {
setTimeout(function(){ openBlock_close(el, height); }, 10); // 10 - СКОРОСТЬ ЗАКРЫТИЯ
} else {
el.style.display = 'none';
}
}
13 Января 2014 (19:04:27)
Илья
(гость)
• ответить
Огромное тебе спасибо Саш. Реально, спасибо. Выручил.
8 Марта 2014 (09:37:47)
Ариан
(гость)
• ответить
Подскажите пожалуйста - как сделать на ява такое событие:
хтмл блок со ссылкой через заданное время скрывается от посетителя страницы и более не доступен ему?
В идеале, хотелось бы, чтобы при обновлении страницы блок уже не показывался.
Спасибо!
хтмл блок со ссылкой через заданное время скрывается от посетителя страницы и более не доступен ему?
В идеале, хотелось бы, чтобы при обновлении страницы блок уже не показывался.
Спасибо!
8 Марта 2014 (09:48:04)
Ариан
(гость)
• ответить
И да, чуть не забыл - нужно какой-нибудь таймер рядом, показывать обратный отсчёт (счёт на минуты)
16 Июня 2014 (12:38:34)
Евгения
(гость)
• ответить
Добрый день! А как сделать чтобы при нажатии на "Нажмите, чтобы раскрыть блок" - эта надпись менялась, например на "Нажмите, чтобы скрыть". А вообще лучше чтобы менялся вид кнопки.До нажатия - один вид, после - другой.
ну, смотря какая у вас html-структура.
в качестве примера, вот, ниже, но надо под ваши реалии подстроить:
в качестве примера, вот, ниже, но надо под ваши реалии подстроить:
if (child.style.display != 'block') {
child.style.display = 'block';
el.className = 'название стиля кнопки (блок открыт)';
} else {
child.style.display = 'none';
el.className = 'название стиля кнопки (блок закрыт)';
}
15 Октября 2014 (09:57:34)
Сергей
(гость)
• ответить
Добрый день, то что искал! Но буду очень признателен, если вы подскажете как сделать некоторые изменениея. У вас список отображается по вертикали. А можно разместить его по горизонтали,чтобы не было такого, допустим при клике по Меню1 отображается скрытый блок,а Меню2 и Меню3 сползаю вниз вместе со скытым блоком. Надо сделать,что бы Меню1 Меню2 Меню3 отображалось по горизонтали и чтобы при клике по любому Меню, все они оставались также по горизонтали, а скрытый блок, открывался под ними.Спасибо
Я также думал, но если вся ширина составляет 800 пикселей и ширина скрытого блока тоже 800 пикселей, то все равно при нажатии меню1 тогда меню2 и меню3 все равно уйдет вниз. Вот был бы вам благодарен, если бы помогли сделать,чтобы скрытые блоки отображались всегда внизу, а меню не смещалось ни куда.Спасибо
10 Февраля 2015 (12:27:41)
Jimmi
(гость)
• ответить
Подскажите, как сделать, что-бы как только курсор уходил с блока, выпадающий блок прятался?
14 Мая 2015 (18:46:31)
Сергей
(гость)
• ответить
Добрый вечер. Подскажите пожалуйста, как реализовать так, чтобы открывал не дочерний div, а в другом месте на сайте. У меня такая структура кода:
Следовательно, скрипт не может его открыть.
В JavaScript поверхностно, поэтому был бы благодарен за помощь Спасибо)
<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('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>
14 Мая 2015 (20:15:19)
Сергей
(гость)
• ответить
Просто количество блоков все время разное, у схожих сайтов с моей тематикой формируется через ID, видимо и мне придется также поступать)
пример:
Я не особо в javascript, поэтому и спрашивал ссылочку на какой нибудь интересный пример для реализации открывания блоков через ID
пример:
Я не особо в javascript, поэтому и спрашивал ссылочку на какой нибудь интересный пример для реализации открывания блоков через ID
6 Апреля 2016 (16:24:34)
михаил
(гость)
• ответить
Как сделать чтобы при клике на другой блок предыдущий закрывался?