Как скрыть содержимое div, пока кнопка не нажата?

Question

Я хочу, чтобы при загрузке веб-страницы отображалась только кнопка, а затем при нажатии появляется следующий элемент div. Я пробовал другие решения, которые рекомендовали другие люди, и всякий раз, когда я использую дисплей: нет; на .ytvid он больше не будет отображаться при нажатии кнопки. Я подумал, что, если jQuery скажет, что при нажатии кнопки он отображается в блоке, он будет работать. Увы, я застрял. Помощь будет высоко ценится.

Я не очень хорош в JQuery. Я пытался исследовать этот вопрос, но затерялся, пытаясь понять ответы людей. Я попытался показать: нет; и изменение jQuery, но это, кажется, сломалось.

    <title>Danielle Pritchett</title>
    <link rel="stylesheet" href="https://use.typekit.net/yjb0hcj.css">




    <style>
        body {
            margin: 0;
            }

        .wrapper {
            display: grid;
            grid-template-columns: 20% 20% 20% 20% 20%;
            background-color: #fff;
            color: #444;
            position:relative;
            }

        .box {
            background-color: #444;
            color: #fff;
            padding: 20px;
            font-size: 150%;
            height: 100vh;
            position:relative;
            }

         .a {
            grid-column: 1 / span 5;
            background-color:white;
            text-align: center;
             background-image: linear-gradient(to right, pink , lightpink);  
             position:relative;

            }

        .b {
            grid-column: 1/ span 5;
            height:20vh;
            background-color: #e6175b;
        }

        .c {
             grid-column: span 1;
            height:10vh;
            background-color: #e6175b;
            text-align:center;

        }

        .d {

            grid-column:  span 1;
            height:10vh;
            background-color: #e6175b;
            text-align:center;
        }

        .e {
            grid-column:  span 1;
            height:10vh;
            background-color: #e6175b;grid-column:  span 1;
            text-align:center;
        }

         .f {
            grid-column:  span 1;
            height:10vh;
            background-color: #e6175b;grid-column:  span 1;
            text-align:center;
        }

         .g {

            grid-column:  span 1;
            height:10vh;
            background-color: #e6175b;
            text-align:center;

        }





        h1{
            font-family: antarctican-headline, sans-serif;
            font-weight: 300;
            font-style: normal;
            color: black;
            font-size: 10vmin;
            margin: 0;
            padding: 0;
            line-height: 100vh;


        }

        h2{
            font-family: antarctican-headline, sans-serif;
            font-weight: 400;
            font-style: normal;
            color: white;
            font-size: 3vmin;
            margin: 0;
            padding: 0;
            line-height: 20vh;
            letter-spacing: 1px;
        }

        .dot {
            height: 25px;
            width: 25px;
            background-color: white;
            border-radius: 50%;
            display: inline-block;
            padding: 0;
            margin:0;
            line-height:10vh;
            position:relative;


            }

        #myDIV {

            grid-column: span 5;
            background-color: lightpink;


        }

        #video{

            grid-column: span 5;

        }

        .ytvid{
           display:none;
        }

        .button {
            background-color: white;
            border: none;
            padding: 16px 32px;
            text-align: center;
            opacity: 0.6;
            transition: 0.3s;
            display: inline-block;
            text-decoration: none;
            cursor: pointer;
            font-family: antarctican-headline, sans-serif;
            font-weight: 400;
            font-style: normal;
            color: #e6175b;
            font-size: 3vmin;
            margin: 0;
            padding: 0;
            line-height: 10vh;
            letter-spacing: 1px;
                }

        .button:hover {
             background-color: pink;

        }



    </style>
</head>

<body>

    <div class="wrapper">
        <div class="box a"><h1> 
                    <span style='color: #e6175b'>C</span>
                    <span style='color: #be1e68'>H</span>
                    <span style='color: #9e226e'>R</span>
                    <span style='color: #8f2575'>O</span>
                    <span style='color: #522e87'>M</span>
                    <span style='color: #32358f'>E</span>
                    <span style='color: #32358f'>S</span>
                    <span style='color: #32358f'>T</span>
                    <span style='color: #522e87'>H</span>
                    <span style='color: #8f2575'>E</span>
                    <span style='color: #9e226e'>S</span>
                    <span style='color: #be1e68'>I</span>
                    <span style='color: #e6175b'>A</span>

            </h1></div>
        <div class="box b"><h2>: type of synesthesia in which color is perceived in response to stimuli that contain no element of color.</h2></div>
        <div class="box c"> <span class="dot"></span></div>
        <div class="box d"><span class="dot"></span></div>
        <div class="box e"><span class="dot"></span></div>
        <div class="box f"><span class="dot"></span></div>
        <div class="box g"><span class="dot"></span></div>
        <button class="button" id="video"onclick="myFunction()">click me</button>

    </div>

    <script>

    function myFunction() {
    var x = document.getElementById("myDIV");
    if (x.style.display === "none") {
        x.style.display = "block";
        } else {
            x.style.display = "none";
        }
    }

    </script>
</body>

Я ожидаю, что при загрузке веб-страницы div .ytvid будет скрыт до нажатия кнопки.

jquery html css

2

Dan P 28 Окт 2019 в 04:55

Answer 1

Вот базовая настройка для этой ситуации, без jQuery:

function toggleDisplay() {
  const ytvid = document.querySelector('.ytvid');
  ytvid.style.display = ytvid.style.display === 'block' ? 'none' : 'block';
}

.ytvid {
  display: none;
}

<button onclick="toggleDisplay()">click me</button>
<div class="ytvid">ytvid</div>

3

Hao Wu 28 Окт 2019 в 02:05

Answer 2

function myFunction() {
  var div = document.getElementById('myDiv');
  div.style.display = div.style.display === 'block' ? 'none' : 'block';
}

$('#btn2').on('click', function() {
  $('#myDiv').toggle();
})

#myDiv {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="myDiv">content</div>
<button class="button" onclick="myFunction()">Via native Js </button>
<button id="btn2" class="button">Via jquery</button>

Это два способа скрытия и отображения соответственно через нативный js и jquery.

0

sugars 28 Окт 2019 в 02:12

Answer 3

  <script src="Scripts/jquery-3.3.1.min.js"></script>
<script>
    $(document).ready(function () {
          $("#contatiner").css("visibility", "hidden");
    });
    function myFunction() {
        $("#contatiner").css("visibility", "visible");

    }
</script>

<div class="wrapper" id="contatiner">
   <div class="box a"><h1> 
                <span style='color: #e6175b'>C</span>
                <span style='color: #be1e68'>H</span>
                <span style='color: #9e226e'>R</span>
                <span style='color: #8f2575'>O</span>
                <span style='color: #522e87'>M</span>
                <span style='color: #32358f'>E</span>
                <span style='color: #32358f'>S</span>
                <span style='color: #32358f'>T</span>
                <span style='color: #522e87'>H</span>
                <span style='color: #8f2575'>E</span>
                <span style='color: #9e226e'>S</span>
                <span style='color: #be1e68'>I</span>
                <span style='color: #e6175b'>A</span>
    </h1></div>
    <div class="box b"><h2>: type of synesthesia in which color is perceived in response to stimuli that contain no element of color.</h2></div>
    <div class="box c"> <span class="dot"></span></div>
    <div class="box d"><span class="dot"></span></div>
    <div class="box e"><span class="dot"></span></div>
    <div class="box f"><span class="dot"></span></div>
    <div class="box g"><span class="dot"></span></div>
   </div>
   <button class="button" id="video" onclick="myFunction();return false;">click me</button>

0

Nasira Mohamed Noufal 28 Окт 2019 в 06:12

Как скрыть содержимое div, пока кнопка не нажата?

3 ответа

Похожие вопросы

Новые вопросы

jquery