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

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

Адаптировал: 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...".
Вот и все,пользуемся

Можешь почитать и вот эту статейку "Флеш облако из картинок"

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

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