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

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

irbees2008 irbees2008 Опубликовано - 9 - октября JS
1776 - 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...".
Вот и все,пользуемся

Можешь почитать и вот эту статейку "Бегущая строка на Jquery с эффектом набора текста"

Опрос

Ваше мнение

Как вам наш дизайн сайта?
Результаты

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

Теги

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

Статистика

  • Caйту: 3324 дня
  • Новостей: 542
  • Комменты: 254
  • Зарегистрированно : 571
  • Онлайн всего: [8]
  • Гости: [7]
  • Поисковики: [1] Google
  • Были сегодня : [4] Яндекс, Google, selischev, irbees2008
  • SQL запросов: 33
  • Генерация страницы: 0.133сек
  • Потребление памяти: 4.937 Mb 
  •   яндекс.ћетрика