Хаки и Скрипты Next Generation CMS

Появление скрытого содержания при нажатии на checkbox

irbees2008 irbees2008 Опубликовано - 9 - октября JS
3655 - 0
  • Адаптировал: irbees2008
  • Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки

Всем привет. Вот тоже нашел в загашнике не очень свежую тему, но всетаки выложу вдруг кому пригодится. Сегодня затронем тему чекбоксов и скрытого текста. То есть в этом примере при нажатии на чекбокс появляется скрытый текст. Все это работает на JS и все просто дальше не куда.
И так приступим:
1.Добавляем скрипт между <head>и </head>:

Код:
<script type="text/javascript">
function showOrHide(hak, cat) {
hak = document.getElementById(hak);
cat = document.getElementById(cat);
if (hak.checked) cat.display = "block";
else cat.style.display = "none";
}
</script>
Как видно из скрипта , он задаёт стили display = "block"; и style.display = "none"; для нашего текста.

2.Далее там где хотим вывести чекбокс и скрытый текст добавляем код
Код:
<div>
<input type = 'checkbox' id = 'hak1' onchange = 'showOrHide("hak1", "cat1");'/>Показать содержимое категории 1
<br />
<div id = 'cat1' style = 'display: none;'>Содержимое категории 1</div>
<input type = 'checkbox' id = 'hak2' onchange = 'showOrHide("hak2", "cat2");' />Показать содержимое категории 2
<br />
<div id = 'cat2' style = 'display: none;'>Содержимое категории 2</div>
<input type = 'checkbox' id = 'hak3' onchange = 'showOrHide("hak3", "cat3");' />Показать содержимое категории 3
<br />
<div id = 'cat3' style = 'display: none;'>Содержимое категории 3</div>
</div>
Если нужно добавить еще checkbox, тогда добавьте вот этот код перед </div>

Как видим из примера меняем переменные только "bloggood1,2,3..." и "cat1,2,3...".
Вот и все,пользуемся

Можешь почитать и вот эту статейку "Линии"

Опрос

Ваше мнение

На каком движке ваш сайт?
Результаты

Последние комментарии

Теги

Anything in here will be replaced on browsers that support the canvas element

Статистика

  • Caйту: 4365 дней
  • Новостей: 566
  • Комменты: 257
  • Зарегистрированно : 660
  • Онлайн всего: [7]
  • Гости: [6]
  • Поисковики: [1] Google
  • Были сегодня : [3] Google, Яндекс, Google
  • SQL запросов: 30
  • Генерация страницы: 0.277сек
  • Потребление памяти: 5.282 Mb 
  •   Яндекс.Метрика