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

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

irbees2008 irbees2008 Опубликовано - 9 - октября JS
4092 - 0
  • Адаптировал: 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"

Опрос

Ваше мнение

Ваше отношение к TWIG
Результаты

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

Теги

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

Статистика

  • Caйту: 4767 дней
  • Новостей: 611
  • Комменты: 257
  • Зарегистрированно : 726
  • Онлайн всего: [13]
  • Гости: [12]
  • Поисковики: [1] Google
  • Были сегодня : [2] Google, Яндекс
  • SQL запросов: 29
  • Генерация страницы: 0.254сек
  • Потребление памяти: 5.166 Mb 
  •   Яндекс.Метрика