DWWEB.RU
СКРИПТЫ

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

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

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

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

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


  1. Как скрыть блок, нажав по кнопке, необходимые условия и пример с кодом.
  2. Нам понадобится два дива, один из них будет кнопкой - это самый простой код, который я только смог придумать! Во внутрь дива поместим ид, в стили поставим бордюр, чтобы видеть, где наш блок: id="example" style="border:1px solid black;"
    На кнопку повесим onclick и прямо внутри onclick, поместим getElementById
    Обратимся к выше анонсированному ид(example) и отправим туда через style свойство display='none'

    Пример
    html
    css
    js
    Наш первый пример
    <div>

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

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

Не забудь !
Название скрипта :Показать + скрыть элемент с текстом.
Скрипт № 39.2
Пример
Скачать - архив
Все скрипты на одной странице
Оставить комментарийCOMMENTS+
Сообщений пока нет - Вы можете стать первым
BBcode
нажмите, чтобы загрузить аватар
Загрузить свой аватар(max ширина, высота = 100px) ( как это работает)

Закрыть
+ =
Подписаться
Теги:
при нажатии на кнопку показать скрытый divпоказать блок js js показать скрытый блок js показать скрыть блок js показать блок при клике скрытый блок js js скрыть блок привте мир

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