Quiero que solo aparezca el botón en la carga de la página web y luego aparece el siguiente div cuando se hace clic. He probado otras soluciones que otras personas me han recomendado y cada vez que uso display: ninguna; en el .ytvid ya no aparecerá cuando haga clic en el botón. Pensé que al hacer que jQuery dijera que cuando se hace clic en el botón, se muestra en bloque, funcionaría. Por desgracia, estoy atascado. La ayuda sería muy apreciada.

No soy bueno en jQuery en absoluto. Traté de investigar esta pregunta, pero me estaba perdiendo al tratar de entender las respuestas de las personas. He intentado mostrar: ninguno; y cambiando jQuery pero parece que se rompe.

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

Espero que cuando se cargue la página web, el div .ytvid se ocultará hasta que haga clic en un botón.

2
Dan P 28 oct. 2019 a las 04:55

3 respuestas

La mejor respuesta

Aquí hay una configuración básica para esta situación, no se incluye 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 oct. 2019 a las 02:05
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>

Estas son las dos formas de ocultar y mostrar, respectivamente, a través de js y jquery nativos.

0
sugars 28 oct. 2019 a las 02:12
  <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 oct. 2019 a las 06:12