BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

Главная » Эффекты для сайта » Появление скрытого содержания при нажатии на флажок (checkbox)

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

2015-05-05 / Вр:23:47 / просмотров: 6727

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

В сегодняшней статье я покажу, как сделать так, чтобы при нажатии на чекбокс появлялся невидимый текст. Используемый для этого скрипт написан на javascript, он позволит выполнить любые действия при изменении состояния (при нажатии).
Посмотрите, какой результат вы получите, когда установите этот код:

[демонстрация]

Вставьте код JavaScript между тегами <head> и </head>:

<script type="text/javascript">
  function showOrHide(bloggood, cat) {
    bloggood = document.getElementById(bloggood);
    cat = document.getElementById(cat);
    if (bloggood.checked) cat.style.display = "block";
    else cat.style.display = "none";
  }
</script>

Вставьте код HTML между тегами <body> и </body>:

<div>
  <input type = 'checkbox' id = 'bloggood1' onchange = 'showOrHide("bloggood1", "cat1");'/>Показать содержимое категории 1
  <br />
  <div id = 'cat1' style = 'display: none;'>Содержимое категории 1</div>
  <input type = 'checkbox' id = 'bloggood2' onchange = 'showOrHide("bloggood2", "cat2");' />Показать содержимое категории 2
  <br />
  <div id = 'cat2' style = 'display: none;'>Содержимое категории 2</div>
  <input type = 'checkbox' id = 'bloggood3' onchange = 'showOrHide("bloggood3", "cat3");' />Показать содержимое категории 3
  <br />
  <div id = 'cat3' style = 'display: none;'>Содержимое категории 3</div>
</div>

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

<script type="text/javascript">
  function showOrHide(bloggood, cat) {
    bloggood = document.getElementById(bloggood);
    cat = document.getElementById(cat);
    if (bloggood.checked) cat.style.display = "block";
    else cat.style.display = "none";
  }
</script>

*меняет только цифры в переменной  "bloggood4" и "cat4".

Вот так будет выглядеть полностью готовый код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Появление действия при нажатии на флажок (checkbox) появляется скрытое содержание (bloggood.ru)</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
  function showOrHide(bloggood, cat) {
    bloggood = document.getElementById(bloggood);
    cat = document.getElementById(cat);
    if (bloggood.checked) cat.style.display = "block";
    else cat.style.display = "none";
  }
</script>
</head>
<body>
<div>
  <input type = 'checkbox' id = 'bloggood1' onchange = 'showOrHide("bloggood1", "cat1");'/>Показать содержимое категории 1
  <br />
  <div id = 'cat1' style = 'display: none;'>Содержимое категории 1</div>
  <input type = 'checkbox' id = 'bloggood2' onchange = 'showOrHide("bloggood2", "cat2");' />Показать содержимое категории 2
  <br />
  <div id = 'cat2' style = 'display: none;'>Содержимое категории 2</div>
  <input type = 'checkbox' id = 'bloggood3' onchange = 'showOrHide("bloggood3", "cat3");' />Показать содержимое категории 3
  <br />
  <div id = 'cat3' style = 'display: none;'>Содержимое категории 3</div>
  <input type = 'checkbox' id = 'bloggood4' onchange = 'showOrHide("bloggood4", "cat4");' />Показать содержимое категории 4
  <br />
  <div id = 'cat4' style = 'display: none;'>Содержимое категории 4</div>
</div>
</body>
</html>

Вот и все! Спасибо, что зашли, надеюсь, информация была понятной и полезной. Всем удачи!

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

5 Ответов на комментарий - Появление скрытого содержания при нажатии на флажок (checkbox)

  1. mvs

    скажите, хочу замутить такую фишку: у себя на сайте [ссылка удалена] на странице с книгой когда человек нажмет на любую кнопку скачать книгу, внизу появлялся с текстом. т.е. это не чекбоксы, а просто кнопка. я в js не силён( подскажите: какой код нужен, чтобы условие было просто click мышкой по кнопке? Спасибо заранее!

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Здравствуйте! На сайте кнопки “скачать” я не нашел!

    Ответить

    mvs отвечает:

    там есть поле “скачать бесплатно в формате” и ряд кнопок “fb2, txt” и т.д. вот хочу чтобы когда человек нажал на любую из этих кнопок под ними появлялось поле с текстом, предлагающее еще че нить скачать) в Вашем примере для условия показа скрытого материала используются чекбоксы. а как сделать условием для показа скрытого текста – нажатие на кнопку?)) они реализованы с помощью плагина Easy Media Download

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Вы можете сделать плавное появление блока (спойлер)

    Ответить

    mvs отвечает:

    спасибо!)) будем пробовать))

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Subscribe without commenting

Метки: , , ,

Мои цели на 2017 год:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Довести количество статей до 750

4). Создать портфолио и мини интернет-магазин шаблонов

5). Создать книгу

6). Довести количество статей до 800

7). Добиться посещаемости 3000 человек/сутки

8). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 787
Количество страниц на блоге: 20
Количество рубрик на блоге: 28
Количество меток на блоге: 72
Количество комментариев на блоге: 4386