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

Показать скрыть блок при клике -можно просто огромным количеством способов! И мы делали несколько страниц, по теме скрыть показать блок по нажатию кнопки jsjavascript.

Как скрыть блок/показать блок при клике.

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

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

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

Для того, чтобы скрыть блок нажав по кнопке вам понадобится:

Тот блок, который вы собираетесь скрывать, со стилями и id:

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

Далее вам нужна кнопка, раз уж мы говорили про кнопку button:

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

После "onclick" отправляем в наш div "style.display='none'"

document.getElementById('example').style.display='none'

Соберем весь код скрытия блока по клику на кнопку:

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

<button onclick="(document.getElementById('example').style.display='none')">Скорой блок - нажми на меня</button>

Пример работы кода скрытия блока по клику на кнопку:

Наш первый пример
Скорой блок - нажми на меня



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

Как скрыть блок, который не виден, либо был скрыт ранее?

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

По умолчанию блок будет невидимый:

в свойствах блока сделаем стили none.

Опять onclick, снова обратиться к тегу с помощью getElementById.

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

Соберем весь код открытия блока по клику на кнопку:

<div id="example_1" style="border:1px solid black; display:none;">Второй пример</div>

<button onclick="(document.getElementById('example_1').style.display='block')">Нажми и покажи блок при клике!</button>

Пример работы кода открытия блока по клику на кнопку:

Второй пример
нажми



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

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

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

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

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

2. Когда мы видим кнопку Показать - значит наш блок скрыт! Теперь на кнопку Показать, вешаем также 3 getElementById, в саму кнопку показать => none, а на Скрыть и блок отправляем => block

3. Искушенному пользователю( с другой стороны искушенный, что здесь будет делать!?) может показаться данный слишком вульгарным! Но когда ваш проект начинается разрастаться ло огромных размеров, а кнопку надо нарисовать здесь в одном месте, чтобы потом не бегать и не напрягать последнюю прямую извилину, где эта хрень сидит! Со стилями с html кодом, с 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>

Пример работы кода открытия/скрытия блока по клику на кнопку:

Скрыть/показать блок
Показать блок Скрыть блок



3 вариант модернизированный скрыть/показать блок

Третий вариант, нажать - скрыть блок, нажать по кнопке - показать блок, практически копия третьего вариант, только скрипты вынесены в тег script

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

Скрыть блок

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

<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>

Javascript:

<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>

<style>

div#second_hide {

border: 1px solid;

padding: 10px;

}

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;

}

</style>




Скрыть показать блок по клику по кнопке или странице

Для этого варианта сделал отдельную страницу, потому, что требовалось нажатие по любой части страницы!

В общем вся логика скрипт аналогичная - единственная проблема, что когда нажимаешь по кнопке, то по странице тоже нажимается! А если вы нажимаем по странице, и блок открытый, то блок закроется - для этого введена временная переменная - timeVar , в общем со всем остальным придется разбираться вам самостоятельно, а я что-то уже притомился на сегодня...

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Пример скрыть / показать блок...</title>

<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>

</head>

<body>

<button>нажми</button>

<div id="my_blok">Здесь содержимое</div>

<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;

}

}

my_blok.onclick = function()

{

timeVar = 1;

}

body.onclick = function()

{

if(!timeVar)

{

my_blok.style = "display: none";

}

if(timeVar) { setTimeout(function(){ timeVar=''; }, 100);}

}

</script>

</body>

</html>




Скрипт показывает блок только 1 раз 1 пользователю

По вот этому поисковому запросу наша страница индексируется :

"скрипт который показывает блок только 1 раз 1 пользователю" - поэтому допишем соответствующий контент!

Написание алгоритма :

Пользователь заходит на сайт.

Пользователю показывается какой-то блок информации 1 раз.

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

Под данный вариант подходит несколько возможностей, для записи данных пользователя:

Сессия - действует до закрытия браузера.

Куки - время действия задается админом.

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>