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

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

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

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

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

Навигация по странице :
  1. Как скрыть блок, нажав по кнопке.
  2. Как показать блок, нажав по кнопке.
  3. Скрыть показать блок по клику
  4. 3 вариант модернизированный
  5. Скрыть показать блок по клику по кнопке или странице
  6. Добавил новый вариант в архив
  7. Еще для ознакомления:

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


  1. Как скрыть блок, нажав по кнопке, необходимые условия и пример с кодом.
  2. Нам понадобится два дива, один из них будет кнопкой - это самый простой код, который я только смог придумать! Во внутрь дива поместим ид, в стили поставим бордюр, чтобы видеть, где наш блок: 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


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

  3. Как скрыть блок, который не виден, либо был скрыт ранее, возьмем код из первого примера и изменим ид, он должен быть уникальным!
    И в стили будем добавлять style.display='none', в свойствах блока сделаме стили none
  4. Пример
    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


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

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

    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 вариант модернизированный

  7. Третий вариант, нажать - скрыть блок, нажать по кнопке - показать блок, практически копия третьего вариант, только скрипты вынесены в тег script
  8. Пример
    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>


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

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

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

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="UTF-8">

    <title>скрыть по клику по кнопке и по странице</title>

    сюда вставляем скопированные стили

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


Вас может еще заинтересовать список тем : #JS | #JS_METHOD | #CLICK |
Последняя дата редактирования : 2020-02-12 10:34
Название скрипта :Показать + скрыть элемент с текстом.
Скрипт № 44.2
Пример
Ссылка на скачивение: Все скрипты на одной странице
Теги:
js показать объект при кликепри нажатии на кнопку показать скрытый divпоказать блок js js показать скрытый блок js показать скрыть блокjs показать блок при кликескрытый блок js js скрыть блок показать и скрыть блок по клику javascriptкак в js вызвать онклик по id блокаскрыть блок divпоказать элемент при клике jsскрытие элементов jsотобразить скрытый блок javascriptотобразить div по нажатию кнопки buttoncss выдвигающийся блок при нажатии

Последние комментарии :
Александр :
04/06/2020 01:42
Спасибо)
подробнее.
admin :
20/05/2020 10:36
Как бы смешно это не звучало! Но! Запускается новая система комментирования COMMENTS+ 1.5. в тестовом режиме!От…
подробнее.
Паула :
21/05/2020 04:48
Вообще мне очень нравится, что вы делаете! И ваш подход! И ваш стиль!И не обращайте внимание на всяких…
подробнее.
admin :
21/05/2020 05:03
Я Вас помню! Вы частенько оставляли сообщения на сайте!Все никак не мог спросить!? У Вас есть сайт -> зачем это…
подробнее.

НАШИ ПРОЕКТЫ : Проекты находятся в разной степени готовности (просто их столько, что времени не хватает…) Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru! © 2015 - 2020 Мы на лучшем хостинге -> ruweb