S3.Blog

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

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

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


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




Александрответить
До нажатия - один вид, после - другой.

переключайте className
Евгения (гость) • ответить
А где можно посмотреть пример?
Александрответить
ну, смотря какая у вас html-структура.
в качестве примера, вот, ниже, но надо под ваши реалии подстроить:
if (child.style.display != 'block') {
child.style.display = 'block';
el.className = 'название стиля кнопки (блок открыт)';
} else {
child.style.display = 'none';
el.className = 'название стиля кнопки (блок закрыт)';
}
Евгения (гость) • ответить
Оk, классно, работает) А если не только стиль, но и саму надпись поменять?
Александрответить
там же, где и el.className, добавьте строчку:
el.innerHTML="<font color='red'>закрой меня</font>";
Сергей (гость) • ответить
Добрый день, то что искал! Но буду очень признателен, если вы подскажете как сделать некоторые изменениея. У вас список отображается по вертикали. А можно разместить его по горизонтали,чтобы не было такого, допустим при клике по Меню1 отображается скрытый блок,а Меню2 и Меню3 сползаю вниз вместе со скытым блоком. Надо сделать,что бы Меню1 Меню2 Меню3 отображалось по горизонтали и чтобы при клике по любому Меню, все они оставались также по горизонтали, а скрытый блок, открывался под ними.Спасибо
Александрответить
добавьте в стиле для DIV.main_block это: float: left;
и уберите <br> между блоками
Сергей (гость) • ответить
Я также думал, но если вся ширина составляет 800 пикселей и ширина скрытого блока тоже 800 пикселей, то все равно при нажатии меню1 тогда меню2 и меню3 все равно уйдет вниз. Вот был бы вам благодарен, если бы помогли сделать,чтобы скрытые блоки отображались всегда внизу, а меню не смещалось ни куда.Спасибо
Александрответить
к тому что я написал выше добавьте это: в стиль DIV.this_block_is_hidden добавьте position: absolute;
Jimmi (гость) • ответить
Подскажите, как сделать, что-бы как только курсор уходил с блока, выпадающий блок прятался?

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

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

 



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