СКРИПТЫ
ТЕГИ:
php (325)
js (242)
html (146)
css (130)
html tags (62)
js tag (56)
jquery (42)
text (37)
js method (36)
php array (33)
js date (33)
form html (30)
online (28)
fonts (26)
link (26)
Показать еще :
ruweb.net (25)
foto (22)
php file (20)
atom (20)
forum (19)
svg (18)
input (18)
hosting (18)
php date (17)
html book (16)
php time (16)
board (16)
color (15)
js url (14)
img (14)
js events (14)
js time (14)
info (13)
select (13)
osclass (13)
htaccess (13)
notepad (13)
знак (12)
php path (12)
keyboard (12)
php img (12)
download (12)
table (12)
dw block (12)
jsphp (11)
form (11)
icon (11)
yandex (10)
mouse (10)
js delete (10)
keyframes (10)
hover (9)
dosite (8)
browser (7)
cookie (7)
comment (7)
php url (7)
php get (6)
click (6)
mysql (6)
canvas (6)
list (6)
iframe (6)
js math (5)
reg.ru (5)
adminka (5)
mb (5)
heading (5)
tag a (5)
chart (5)
search (5)
ftp (5)
year (5)
js id (5)
value (5)
base64 (4)
day (4)
нок (4)
flags (4)
week (4)
xml (4)
scandir (4)
ssl (4)
bbcode (4)
php var (4)
games (4)
console (4)
js form (4)
vk (4)
pages (4)
submit (4)
month (4)
symbols (4)
task (4)
https (3)
js hash (3)
js post (3)
domen (3)
money (3)
vs code (3)
куб (3)
js img (3)
ucoz (3)
padding (3)
captcha (3)
numbers (3)
line (3)
tag hr (2)
qr kod (2)
youtube (2)
video (2)
рся (2)
sitemap (2)
counter (2)
details (2)
prompt (2)
typeof (2)
google (2)
height (2)
arrows (2)
seo (2)
js vars (2)
smile (1)
scroll (1)
speed (1)
нод (1)
archive (1)
header (1)
windows (1)
rutube (1)
jino (1)
cursor (1)

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

Показать скрыть блок при клике -можно просто огромным количеством способов! И мы делали несколько страниц, по теме скрыть показать блок по нажатию кнопки jsjavascript.
Начнем с простого, как скрыть блок в теории, с логики скрипта, потом перейдем к тому как показать блок и внизу будет архив, который можно будет скачать! Пару слов о программировании:
Друзья! Еще раз хочу обратить ваше внимание! Что программирование - это не математика и здесь 1 + 1 = 2 - можно сложить иногда сотней способов! На странице представлены варианты скрипта скрыть показать блок, которые, я когда-то делал, и которые до сих пор использую. Естественно, что самый продвинутый в этом плане последний скрипт показать крыть блок по клику, не только по кнопке, но и по странице! Это реализовано на данной странице - если вы посмотрите на значок лупа в правой стороне меню!

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

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

  • Нажать на кнопку показать поле
  • Выдвижная панель слева CSS+JS
  • Плавно скрыть показать блок по клику
  • Скачать можно здесь

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

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

      Во внутрь дива поместим ид, в стили поставим бордюр, чтобы видеть, где наш блок: 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


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

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

      И в стили будем добавлять 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


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

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

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

      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


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


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

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

      В общем вся логика скрипт аналогичная - единственная проблема, что когда нажимаешь по кнопке, то по странице тоже нажимается! А если вы нажимаем по странице, и блок открытый, то блок закроется - для этого введена временная переменная - 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>


    6. Скрипт показывает блок только 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>';//если переменная существует выводим блок.

      }


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

      Скачать здесь
      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

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

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

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


    9. при нажатии на любое место в браузере срабатывает команда в 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
    Еще никто не прокомментировал! COMMENTS+   BBcode
    Подписаться + =

    ruweb dwweb.ru есть здесь:
    Последние комментарии :
    Марат :
    15.08.2023 17:50
    Значит в "maxv" сидит…
    подробнее.
    михаил :
    15.08.2023 16:53
    а если это сделано для диаграммы values / maxv)…
    подробнее.
    Марат :
    17.07.2023 15:50
    Спасибо за интересный вопрос! Посмотрите …
    подробнее.
    Александр :
    17.07.2023 14:58
    а как сделать чтобы при повторном клике значение value возвращалось к…
    подробнее.
    Марат :
    30.06.2023 10:18
    Спасибо за внимательность!
    подробнее.
    ???? :
    29.06.2023 15:37
    Прямоугольник - это геометрическая фигура, у которой три угла…
    подробнее.
    Немного о ruweb.net!
    Страница загружена за : 0.028004 секунд. Подробнее