Показать и скрыть div по клику на button.

Тема в разделе "JavaScript", создана пользователем usergeyv, 2 дек 2017.

  1. usergeyv

    usergeyv Постоялец

    Регистр.:
    5 июл 2013
    Сообщения:
    131
    Симпатии:
    20
    Есть код
    HTML:
    <script>
    $(document).ready(function(){
    
               $("#showHideContent").click(function () {
                           if ($("#content").is(":hidden")) {
    
                                   $("#content").show("slow");
    
                           } else {
    
                                   $("#content").hide("slow");
    
                           }
    return false;
    });
    });
      </script>   
    <button id="showHideContent">Показать/Скрыть</button>
    
    <div id="content" style="display:none;">Содержание, которое скрыто по-умолчанию. Покажется/скроется при клике на одну и ту же ссылку.</div>
    скрывает и показывает content , а нужно два button:
    Код:
    <button id="showContent">Показать</button>
    <button id="HideContent">Скрыть</button>
    Один показывает , другой скрывает, какой код должен быть?
     
  2. inturned

    inturned Webmaster & Designer

    Регистр.:
    7 ноя 2011
    Сообщения:
    545
    Симпатии:
    270
    HTML:
    <!DOCTYPE html>
    <html lang="ru">
        <head>
            <title>No Title</title>
            <meta charset="utf-8">
        </head>
        <body>
            <button id="showContent">Показать</button>
            <button id="hideContent">Скрыть</button>
    
            <div id="content" style="display:none;">Содержание, которое скрыто по-умолчанию. Покажется/скроется при клике на соответствующие кнопки.</div>
    
            <script>
                let content = document.getElementById("content")
                let show = document.getElementById("showContent")
                let hide = document.getElementById("hideContent")
    
                show.addEventListener("click", () => {
                    content.style.display = "block"
                })
    
                hide.addEventListener("click", () => {
                    content.style.display = "none"
                })
            </script>
        </body>
    </html>
     
    Sorcus и usergeyv нравится это.
  3. usergeyv

    usergeyv Постоялец

    Регистр.:
    5 июл 2013
    Сообщения:
    131
    Симпатии:
    20
    А как показать через N секунд после нажатия?
     
  4. Sorcus

    Sorcus Sorcus. A New Beginning.

    Moderator
    Регистр.:
    10 июл 2011
    Сообщения:
    430
    Симпатии:
    786
    HTML:
    show.addEventListener("click", () => {
      setTimeout(() => {
        content.style.display = "block"
      }, 3000)
    })
    Т.е. показать спустя 3 секунды.
     
    l0cky и usergeyv нравится это.