Показываем/скрываем блок при клике javascript
Начнем с простого, как скрыть блок в теории, с логики скрипта, потом перейдем к тому как показать блок и внизу будет архив, который можно будет скачать! Пару слов о программировании:
- Как скрыть блок, нажав по кнопке.
- Как показать блок, нажав по кнопке.
- Скрыть показать блок по клику
- 3 вариант модернизированный
- Скрыть показать блок по клику по кнопке или странице
- Скрипт показывает блок только 1 раз 1 пользователю Вышеперечисленные скачать
Универсальный скрипт показать скрыть блок
СкачатьУниверсальный №2. - при нажатии на любое место в браузере срабатывает команда в js
- Один из пунктов на отдельной странице.
Еще для ознакомления:
Как скрыть блок, нажав по кнопке, необходимые условия и пример с кодом.
Нам понадобится два дива, один из них будет кнопкой - это самый простой код, который я только смог придумать!
Во внутрь дива поместим ид, в стили поставим бордюр, чтобы видеть, где наш блок:На кнопку повесим onclick и прямо внутри onclick, поместим getElementById
Обратимся к выше анонсированному ид(example) и отправим туда через
<div id="example" style="border:1px solid black;">Наш первый пример</div>
<button onclick="(document.getElementById('example').style.display='none')">нажми</button>
нет
встроен в html
Как показать блок, нажав по кнопке, необходимые условия и пример с кодом.
Как скрыть блок, который не виден, либо был скрыт ранее, возьмем код из первого примера и изменим ид, он должен быть уникальным!
И в стили будем добавлять<div id="example_1" style="border:1px solid black; display:none;">Наш первый пример</div>
<button onclick="(document.getElementById('example_1').style.display='block')">нажми</button>
нет
встроен в html
Скрыть показать блок по клику
Следующим пунктом соединим первые два - и у нас получится самый первый скрипт - скрыть-показать блок по клику, нажав по кнопке!
У нас получится две кнопки и один блок.
Нажимаем по кнопке Скрыть, и вешаем сразу три getElementById на onclick - в блок отправляем none, в саму кнопку, на которую нажали тоже отправляем none, а в кнопку показать отправляем block
<div id="example_2" style="border:1px solid black; display:block;">Наш первый пример</div>
<button id="example_2_1" onclick="document.getElementById('example_2').style.display='block'; document.getElementById('example_2_1').style.display='none'; document.getElementById('example_2_2').style.display='block';" style="display:none;">Показать</button>
<button id="example_2_2" onclick=" document.getElementById('example_2').style.display='none'; document.getElementById('example_2_2').style.display='none'; document.getElementById('example_2_1').style.display='block';">Скрыть</button>
нет
встроен в html
3 вариант модернизированный
Третий вариант, нажать - скрыть блок, нажать по кнопке - показать блок, практически копия третьего вариант, только скрипты вынесены в тег script
Показать блок
<p id="first" onclick="first()">Показать блок</p>
<p id="first_yelloy"; style="display:none" onclick="first_yelloy()">Скрыть блок </p>
<div id="second_hide" style="display:none">
здесь дргой блок с текстом...
</div>
</div>
p#first {
cursor: pointer;
font-family: cursive;
line-height: 13px;
text-indent: 22px;
line-height: 33px;
border: 1px solid #d2d2d2;
font-size: 18px;
}
p#first_yelloy {
cursor: pointer;
background: #ff9900;
font-size: 18px;
color: white;
text-indent: 22px;
line-height: 33px;
border: 1PX SOLID #ff9900;
}
<script>
function first() {
document.getElementById("second_hide").setAttribute("style", "opacity:1; transition: 1s; height: 100%;");
document.getElementById("first").setAttribute("style", "display: none");
document.getElementById("first_yelloy").setAttribute("style", "display: block");
}
function first_yelloy() {
document.getElementById("second_hide").setAttribute("style", "display: none");
document.getElementById("first_yelloy").setAttribute("style", "display: none");
document.getElementById("first").setAttribute("style", "display: block");
}
</script>
Скрыть показать блок по клику по кнопке или странице
Для этого варианта сделал отдельную страницу, потому, что требовалось нажатие по любой части страницы!
В общем вся логика скрипт аналогичная - единственная проблема, что когда нажимаешь по кнопке, то по странице тоже нажимается! А если вы нажимаем по странице, и блок открытый, то блок закроется - для этого введена временная переменная - timeVar , в общем со всем остальным придется разбираться вам самостоятельно, а я что-то уже притомился на сегодня...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<button>нажми</button>
<div id="my_blok">Здесь содержимое</div>
</body>
</html>
<style>#my_blok{ display: none; width: 300px; height: 200px; background:blue; color: white; }
body { width: 100%; height: 100%; position: absolute; background: aliceblue;}
#my_blok_div{width: 300px; height: 200px; cursor: pointer;}
</style>
<script>
var timeVar='';
body = document.querySelector('body');
button = document.querySelector('button');
my_blok = document.querySelector('#my_blok');
button.onclick = function()
{
if(my_blok.style.display == "block")
{
my_blok.style = "display: none";
}
else
{
my_blok.style = "display: block"; timeVar = 1;
}
}
body.onclick = function()
{
if(!timeVar)
{
my_blok.style = "display: none";
}
if(timeVar) { setTimeout(function(){ timeVar=''; }, 100);}
}
</script>
Скрипт показывает блок только 1 раз 1 пользователю
По вот этому поисковому запросу наша страница индексируется :
"скрипт который показывает блок только 1 раз 1 пользователю" - поэтому допишем соответствующий контент!Пользователь заходит на сайт.
Пользователю показывается какой-то блок информации 1 раз.
Значит, каким-тио образом, данные пользователя надо записать в память браузера, чтобы он понимал, что это именно тот пользователь, кому уже был показан данный блок!
Под данный вариант подходит несколько возможностей, для записи данных пользователя:1). Сессия - действует до закрытия браузера.
2). Куки - время действия задается админом.
3). LocalStorage
Использование сессий для показа блока 1 раз в сутки.
Для показа блока один раз в день захода пользователя будем использовать сессии:
if(!$_SESSION['show_block']) //Проверяем существует ли сессия.
{
$_SESSION['show_block'] = 1; //Создаем сессию.
echo '<div>здесь блок. который будет показываться один раз</div>';//Показываем блок
}
Использование кук для показа блока время устанавливается.
В самом верху страницы размещаем код:
$first_time ='';//Всегда не существует.
if (!$_COOKIE["{
$first_time =1;//Переменная будет существовать до создания кук.
setcookie("}
В любом месте:
if ($first_time) //Проверяем существование переменной.
{
echo '<div>Блок. который покажется 1 раз</div>';//если переменная существует выводим блок.
}
Универсальный, многофункциональный скрипт показать скрыть блок
Скачать здесьКогда вы постоянно заняты сайтом, делаете для себя или для других, либо пишите о каких-то темах, как я здесь на сайте, то возникает постоянная необходимость универсального скрипта, который бы :
Открывал блок.
Открывал блоки, много блоков.
Открывал разные типы блоков.
И также мог закрывать их, вне зависимости от того, который из них открыт или закрыт.
У кнопки "открыть" должен быть класс(class) = "toopen" и уникальный ид(id) вида first_
У кнопки "закрыть" должен быть класс = "toclose" и уникальный ид(id) вида second_
<span class="toclose" id="second_
Здесь любой тег, содержание, текст, картинка и тд... фиолетовый div - это пример...
</div></span>
Как вы знаете, что у всякого элемента есть свойство по умолчанию - "display", например у "div" - это "block", а у "button" "inline-block".
Когда вы используете в элементе "открыть" разные типы "div,button и др." то это надо каким-то образом передать и записать, чтобы потом эти данные вернуть. Надеюсь вы понимаете о чем это я! Элементы могут быть блочными, либо строчными. И занимают, либо всю строку, как "div", либо часть строки, как например "span". Поэтому, когда из "display:none" мы возвращаем в блок видимость, то надо возвращать либо "block", для "div", либо "inline", как для "span".
div
span
a
button
Примеры работы многофункционального скрипта - открыть закрыть блок.
Универсальный скрипт №2 - показать\-скрыть блок.
Абзац получился чересчур большим, поэтому, см. на отдельной страницеКлассы одинаковые, будут показывать одинаковые свойства. Но эти же классы находятся в других местах((не запланированных), должны иметь другие свойства. Приходится на одни и те же классы нанизывать разные свойства. И получается огромная гора каши в стилях и в голове, когда непонятно, когда этот класс отвечает за это и когда этот же класс отвечает за другое.
при нажатии на любое место в браузере срабатывает команда в js
Это просто...
<script>
document.addEventListener('click', function()
{
alert('вы нажали на любое место');
});
</script>
js показать объект при клике
при нажатии на кнопку показать скрытый div
показать блок js
js показать скрытый блок
js показать скрыть блок
js показать блок при клике
скрытый блок js
js скрыть блок
показать и скрыть блок по клику javascript
как в js вызвать онклик по id блока
скрыть блок div
показать элемент при клике js
скрытие элементов js
отобразить скрытый блок javascript
отобразить div по нажатию кнопки button
css выдвигающийся блок при нажатии
при нажатии на любое место в браузере срабатывает команда в js
функция show hide ява скрипт
скрипт показывать только один раз пользователю
js show div

подробнее.
подробнее.