Хаки и Скрипты Next Generation CMS : JS, Интерфейс : Появление скрытого содержания при нажатии на checkbox

irbees2008 Опубликовано - 9 - октября JS

Адаптировал: irbees2008
Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки

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

Код:

1<script type="text/javascript">
2  function showOrHide(hak, cat) {
3    hak = document.getElementById(hak);
4    cat = document.getElementById(cat);
5    if (hak.checked) cat.display = "block";
6    else cat.style.display = "none";
7  }
8</script>

Как видно из скрипта , он задаёт стили display = "block"; и style.display = "none"; для нашего текста.

2.Далее там где хотим вывести чекбокс и скрытый текст добавляем код

Код:

01<div>
02  <input type = 'checkbox' id = 'hak1' onchange = 'showOrHide("hak1", "cat1");'/>Показать содержимое категории 1
03  <br />
04  <div id = 'cat1' style = 'display: none;'>Содержимое категории 1</div>
05  <input type = 'checkbox' id = 'hak2' onchange = 'showOrHide("hak2", "cat2");' />Показать содержимое категории 2
06  <br />
07  <div id = 'cat2' style = 'display: none;'>Содержимое категории 2</div>
08  <input type = 'checkbox' id = 'hak3' onchange = 'showOrHide("hak3", "cat3");' />Показать содержимое категории 3
09  <br />
10  <div id = 'cat3' style = 'display: none;'>Содержимое категории 3</div>
11</div>

Если нужно добавить еще checkbox, тогда добавьте вот этот код перед </div>

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

Можешь почитать и вот эту статейку "HTML теги address"

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.