сайт на данный момент является архивом информации по форуму phpbb 3.0. объяснения и помощь больше не предоставляются.
info navigation

phpbb-belk.ru

темы, связанные с форумом phpbb 3.0.x



Новая тема  [ 1 сообщение ]  Просмотры: 727

Автор Сообщение
Не в сети
(Андрей)  
Администратор
Аватара пользователя

Стаж: 10 лет 5 месяцев 24 дня
Сообщения: 1237
Откуда: здешние мы


Стиль: subsilver2


Репутация: 11


Russia

Тиц и PR

перейти на сайт пользователя
Найти темы пользователя


простые спойлера или раскрытие скрытых блоков

в данной теме я буду размещать простые сборки, которые реализуют функцию спойлера (открытие/закрытие скрытого блока) при разных факторах воздействия, таких, как при наведении, по клику...

 


Открытие блоков по клику


1.простой спойлер

пример:

нажмите сюда!
здесь что-то спрятано


сделано это просто:

Код: Выделить всё

<div>
   <div style="font-size: 0.9em; font-weight: bold; cursor: pointer" onclick="hidn = this.parentNode.getElementsByTagName('div')[1]; btn = this.getElementsByTagName('img')[0]; if (hidn.style.display != '') { hidn.style.display = ''; orimg = btn.src; btn.src = 'data:image/gif;base64,R0lGODlhCQAJAMQeAOLt+ff8//z+/4CRxo2by7vF6a254X6PxICQw87a74CQxuXo84CQxM/b7/H6/v7+/oGRxouayoGSxv7+/8LN7IqZyv7//4KSxur0/MrV74OTx9Ld8trl9gwMDP///wAAACH5BAEAAB4ALAAAAAAJAAkAAAU4oFcpwzFAkWgUVLZxCQGxLgdgGtS+t6NJmY5QOEFcNo/kZGLRXGwYR0DQjDSiU8uCIJJIGJdLKgQAOw=='; } else { hidn.style.display = 'none'; btn.src = orimg; }">
      <img style="margin: 0; padding: 5px 5px 0" src="data:image/gif;base64,R0lGODlhCQAJAMQfAIqZyoGSxv3+/trl84CQxYCRxn6PxMXQ7efq9H+Pwtnk8oKTxoCQxKy44QAAANvl9rvG6fD5/o2by4GRxvb8//v9//7+/ubw+v39/ouayoKSxoOTx/7+/wwMDP///////yH5BAEAAB8ALAAAAAAJAAkAAAU84AdoGkNmX4Z4HldRirSxXMdF1zK7nXU9mk2t4+h0BIlNhWPpYTCBDQXXwRwggczgJ8BAGhLRZGIoEFAhADs=" />
      <u>нажмите сюда!</u>
   </div>
   <div style="display: none;">
      здесь что-то спрятано
   </div>
</div>


ссылку на автора написать не могу, так как нашёл его в сети очень давно и не помню уже где...


 

 


Открытие блоков при наведении


1. Простое открытие при наведении на CSS

пример:

наведите на меня!
а вот здесь что-то спрятанo


делается это очень просто:

 html-код 

Код: Выделить всё

<div id="picTxt">
наведите на меня
<br>
<span>а вот здесь что-то спрятано</span>
</div>


 css 

Код: Выделить всё

#picTxt {cursor: default;}
#picTxt span {display:none;}
#picTxt:hover span {display:block;}




 


в процессе. тема будет постоянно пополняться. как увижу в сети чего новенького - запишу.


трёхголовый белк семейства рептилоидов:
"три головы - хорошо, на как же трудно придти к согласию..."
спойлер,открытие,закрытие,блоки,при наведении,по клику
Показать сообщения за:  Поле сортировки  
Ответить на тему  [ 1 сообщение ] 

Кто сейчас на сайте:

Всего посетителей: 0, из них зарегистрированных: 0, скрытых: 0 и гостей: 0 (основано на активности пользователей за последние 5 минут)
Больше всего посетителей (900) здесь было 15 мар 2026, 00:35

Сейчас этот раздел просматривают: нет зарегистрированных пользователей и гости: 0



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

Найти:
Перейти:  




cron

Текущее время: 16 мар 2026, 05:04

Создано на основе phpBB® Forum Software © phpBB Group
Яндекс.Метрика

Полная версия Мобильный вид