Хаки и Скрипты 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...".
Вот и все,пользуемся

Можешь почитать и вот эту статейку "SEO продолжаем его кушать ))) часть 6"

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

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