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

Показать скрыть блок при клике 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>


    Последняя дата редактирования : 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 по нажатию кнопки buttoncss выдвигающийся блок при нажатиипри нажатии на любое место в браузере срабатывает команда в jsфункция show hide ява скриптскрипт показывать только один раз пользователю

    Счетчик в график :

    Построение гравиков
    Основа для графика : счетчик посещаемости.
    Последние комментарии :
    Марат :
    13/04/2021 08:12
    Во-первых пожалуйста!1). $new_array - был прописан оттого, что контент на сайте пишется на живых примерах. И часто…
    подробнее.
    Валерий :
    13/04/2021 05:47
    перебрал весь материал- во первых спасибоискал другое но понравился Ваш материалerror - или неточность 1. везде…
    подробнее.
    Марат :
    08/04/2021 07:12
    Сам афигеваю!
    подробнее.
    stream :
    07/04/2021 05:56
    Неплохо)
    подробнее.
    Марат :
    24/03/2021 11:01
    Да что вы!? За что обижаться то?Вы тот редкий человек, который смог написать! Вы молодец!Человек, же который не…
    подробнее.