Показываем/скрываем блок при клике javascript

1. Как скрыть блок, нажав по кнопке.
2. Как показать блок, нажав по кнопке.
3. Скрыть показать блок по клику
4. 3 вариант модернизированный
5. Скрыть показать блок по клику по кнопке или странице
6. Скрипт показывает блок только 1 раз 1 пользователю
Вышеперечисленные скачать
7. Универсальный скрипт показать скрыть блок
Скачать

8. Универсальный №2.
9. при нажатии на любое место в браузере срабатывает команда в js
10. Один из пунктов на отдельной странице.

Еще для ознакомления:

Скопировать ссылку



Как скрыть блок, нажав по кнопке, необходимые условия и пример с кодом.

Нам понадобится два дива, один из них будет кнопкой - это самый простой код, который я только смог придумать!

Во внутрь дива поместим ид, в стили поставим бордюр, чтобы видеть, где наш блок: id="example" style="border:1px solid black;"
На кнопку повесим onclick и прямо внутри onclick, поместим getElementById
Обратимся к выше анонсированному ид(example) и отправим туда через style свойство display='none'

Пример

html

css

js

Наш первый пример

нажми

<div id="example" style="border:1px solid black;">Наш первый пример</div>

<button onclick="(document.getElementById('example').style.display='none')">нажми</button>

нет

встроен в html

Скопировать ссылку



Как показать блок, нажав по кнопке, необходимые условия и пример с кодом.

Как скрыть блок, который не виден, либо был скрыт ранее, возьмем код из первого примера и изменим ид, он должен быть уникальным!

И в стили будем добавлять style.display='none', в свойствах блока сделаем стили none

Пример

html

css

js

Наш первый пример

нажми

<div id="example_1" style="border:1px solid black; display:none;">Наш первый пример</div>

<button onclick="(document.getElementById('example_1').style.display='block')">нажми</button>

нет

встроен в html

Скопировать ссылку



Скрыть показать блок по клику

Следующим пунктом соединим первые два - и у нас получится самый первый скрипт - скрыть-показать блок по клику, нажав по кнопке!

У нас получится две кнопки и один блок.

1. Когда нам требуется скрыть блок, то кнопка Показать(example_2_1) не видна.


Нажимаем по кнопке Скрыть, и вешаем сразу три getElementById на onclick - в блок отправляем none, в саму кнопку, на которую нажали тоже отправляем none, а в кнопку показать отправляем block

2. Когда мы видим кнопку Показать - значит наш блок скрыт! Теперь на кнопку Показать, вешаем также 3 getElementById, в саму кнопку показать => none, а на Скрыть и блок отправляем => block
3. Искушенному пользователю( с другой стороны искушенный, что здесь будет делать!?) может показаться данный слишком вульгарным! Но когда ваш проект начинается разрастаться ло огромных размеров, а кнопку надо нарисовать здесь в одном месте, чтобы потом не бегать и не напрягать последнюю прямую извилину, где эта хрень сидит! Со стилями с html кодом, с js и все в разных местах...

Пример

html

css

js

Наш первый пример

Показать Скрыть

<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

Пример

html

css

js

Показать блок

Скрыть блок

здесь дргой блок с текстом...

<div>


<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 , в общем со всем остальным придется разбираться вам самостоятельно, а я что-то уже притомился на сегодня...

Пример

html

css

js

Пример на отдельной странице , скопировать можно саму страницу, либо код страницы ctrl + U


<div>


<!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("Любое_название", "любое_слово", time() + 3600*24*10, "/"); //Создаем куки


}

Любое_название, например - "example"


В любом месте:

if ($first_time) //Проверяем существование переменной.

{

echo '<div>Блок. который покажется 1 раз</div>';//если переменная существует выводим блок.

}

Скопировать ссылку



Универсальный, многофункциональный скрипт показать скрыть блок

Скачать здесь
15.10.2020

Когда вы постоянно заняты сайтом, делаете для себя или для других, либо пишите о каких-то темах, как я здесь на сайте, то возникает постоянная необходимость универсального скрипта, который бы :

Открывал блок.

Открывал блоки, много блоков.

Открывал разные типы блоков.

И также мог закрывать их, вне зависимости от того, который из них открыт или закрыт.

Я такой себе написал и поделюсь им с вами

Один скрипт будет обрабатывать все нажатия на открыть, закрыть.

У кнопки "открыть" должен быть класс(class) = "toopen" и уникальный ид(id) вида first_число

У кнопки "закрыть" должен быть класс = "toclose" и уникальный ид(id) вида second_число

Пример кнопок : Здесь одно главное условие, если вы не поняли из выше приведенного пояснения, число не должно повторяться, если у вас много кнопок... отмечено красным 4 :

<span class="toopen" id="first_4" style="cursor:pointer;">Можно использовать span</span>
<span class="toclose" id="second_4" style="display:none;cursor: pointer;">Скрыть
<div class="kod">


Здесь любой тег, содержание, текст, картинка и тд... фиолетовый div - это пример...

</div>


</span>

О display :

Как вы знаете, что у всякого элемента есть свойство по умолчанию - "display", например у "div" - это "block", а у "button" "inline-block".

Зачем это надо!?

Когда вы используете в элементе "открыть" разные типы "div,button и др." то это надо каким-то образом передать и записать, чтобы потом эти данные вернуть. Надеюсь вы понимаете о чем это я! Элементы могут быть блочными, либо строчными. И занимают, либо всю строку, как "div", либо часть строки, как например "span". Поэтому, когда из "display:none" мы возвращаем в блок видимость, то надо возвращать либо "block", для "div", либо "inline", как для "span".

Сейчас в скрипте прописаны для 4 типов:

div

span

a

button

Примеры работы многофункционального скрипта - открыть закрыть блок.

div Показать Скрыть - здесь, внутри тега может быть любое содержимое, может картинка : Ссылка : Показать СкрытьОчень простая логика
button Можно использовать кнопку Скрыть


Или любой другой тег

span Можно использовать span Скрыть


Или любой другой тег

Скопировать ссылку

Универсальный скрипт №2 - показать\-скрыть блок.

Абзац получился чересчур большим, поэтому, см. на отдельной странице
И немного текста вдогонку... : По мере использования предыдущего универсального скрипта "показать-скрыть блок при нажатии" столкнулся с проблемой, что не всегда возможно использовать классы - поскольку возникает конфликт повторяемости... если в двух словах, то:


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

Скопировать ссылку



при нажатии на любое место в браузере срабатывает команда в js

Это просто...

<script>

document.addEventListener('click', function()

{

alert('вы нажали на любое место');

});

</script>

Еще никто не прокомментировал! COMMENTS+   BBcode

Подписаться + =

---