title: How to hide div contents until button is clicked?
body: <p>I want to have only the button appear on the webpage load and then the following div appears when clicked. I have tried other solutions that other people have recommended and whenever I use display: none; on the .ytvid it will not appear at all anymore when the button is clicked. I thought that by having the jQuery say when the button is clicked it displays in block it would work. Alas I am stuck. Help would be much appreciated. </p>
  
  <p>I'm not good at jQuery at all. I tried to research this question but was getting lost in trying to understand peoples answers. I have tried display: none; and changing the jQuery but it just seems to break. </p>
  
  <p></p>
  
  <p>
      </p>
  
  <pre><code>    &lt;title&gt;Danielle Pritchett&lt;/title&gt;
      &lt;link rel="stylesheet" href="https://use.typekit.net/yjb0hcj.css"&gt;
  
  
  
  
      &lt;style&gt;
          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;
  
          }
  
  
  
      &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;div class="wrapper"&gt;
          &lt;div class="box a"&gt;&lt;h1&gt; 
                      &lt;span style='color: #e6175b'&gt;C&lt;/span&gt;
                      &lt;span style='color: #be1e68'&gt;H&lt;/span&gt;
                      &lt;span style='color: #9e226e'&gt;R&lt;/span&gt;
                      &lt;span style='color: #8f2575'&gt;O&lt;/span&gt;
                      &lt;span style='color: #522e87'&gt;M&lt;/span&gt;
                      &lt;span style='color: #32358f'&gt;E&lt;/span&gt;
                      &lt;span style='color: #32358f'&gt;S&lt;/span&gt;
                      &lt;span style='color: #32358f'&gt;T&lt;/span&gt;
                      &lt;span style='color: #522e87'&gt;H&lt;/span&gt;
                      &lt;span style='color: #8f2575'&gt;E&lt;/span&gt;
                      &lt;span style='color: #9e226e'&gt;S&lt;/span&gt;
                      &lt;span style='color: #be1e68'&gt;I&lt;/span&gt;
                      &lt;span style='color: #e6175b'&gt;A&lt;/span&gt;
  
              &lt;/h1&gt;&lt;/div&gt;
          &lt;div class="box b"&gt;&lt;h2&gt;: type of synesthesia in which color is perceived in response to stimuli that contain no element of color.&lt;/h2&gt;&lt;/div&gt;
          &lt;div class="box c"&gt; &lt;span class="dot"&gt;&lt;/span&gt;&lt;/div&gt;
          &lt;div class="box d"&gt;&lt;span class="dot"&gt;&lt;/span&gt;&lt;/div&gt;
          &lt;div class="box e"&gt;&lt;span class="dot"&gt;&lt;/span&gt;&lt;/div&gt;
          &lt;div class="box f"&gt;&lt;span class="dot"&gt;&lt;/span&gt;&lt;/div&gt;
          &lt;div class="box g"&gt;&lt;span class="dot"&gt;&lt;/span&gt;&lt;/div&gt;
          &lt;button class="button" id="video"onclick="myFunction()"&gt;click me&lt;/button&gt;
  </code></pre>
  
  
  
  
  <pre><code>    &lt;/div&gt;
  
      &lt;script&gt;
  
      function myFunction() {
      var x = document.getElementById("myDIV");
      if (x.style.display === "none") {
          x.style.display = "block";
          } else {
              x.style.display = "none";
          }
      }
  
      &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>I expect that when the webpage load, the .ytvid div will be hidden until there is a button click.</p>