Всех друзей поздравляем с Новым годом! Всего вам самого наилучшего! Всех благ, здоровья а материальное приложится!
СКРИПТЫ althtmlcssphpjsblog

Показать скрыть блок при клике js

Поддержи проект!!! smile

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

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

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

  • Нажать на кнопку показать поле
  • Выдвижная панель слева 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. при нажатии на любое место в браузере срабатывает команда в js

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

      <script>

      document.addEventListener('click', function()

      {

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

      });

      </script>


    Вас может еще заинтересовать список тем : #JS | #JS_METHOD | #CLICK |
    Последняя дата редактирования : 19.01.2021 18:26
    //dwweb.ru/comments_1_5/include/img/hand_no_foto.png
    no
    no
    Еще никто не прокомментировал! COMMENTS+   BBcode
    аватар
    🞨
    Загрузить свой аватар
    (max ширина, высота = 200px)

    Подписаться + =
    Теги:
    js показать объект при клике при нажатии на кнопку показать скрытый div показать блок js js показать скрытый блок js показать скрыть блок js показать блок при клике скрытый блок js js скрыть блок показать и скрыть блок по клику javascript как в js вызвать онклик по id блока скрыть блок div показать элемент при клике js скрытие элементов js отобразить скрытый блок javascript отобразить div по нажатию кнопки button css выдвигающийся блок при нажатии при нажатии на любое место в браузере срабатывает команда в js функция show hide ява скрипт скрипт показывать только один раз пользователю

    Последние комментарии :
    Марат :
    19/01/2021 01:13
    Всегда пожалуйста!Приходите ещё!
    подробнее.
    аркадий :
    19/01/2021 01:08
    Спасибо!Меню вернулось. Класс!
    подробнее.
    Прохожий :
    02/01/2021 10:44
    Здравствуйте Марат!Спасибо Вам, за оперативность и развернутый ответ с примерами. И ОГРОМНОЕ спасибо, что…
    подробнее.
    Марат :
    01/01/2021 03:30
    И вас с Новым годом!Посмотрите …
    подробнее.
    Прохожий :
    31/12/2020 03:58
    А как проверить, чекнут ли чекбокс программно, то есть - другим скриптом, а не мышкой?Вот тут…
    подробнее.