title: div with iframe in it, display none
body: <p>I have a page where I am displaying a iframe from another page. I want that iframe to be display:none at load and become visible onClick. The issue is, I can get it to work if the div is visible at load. If it is hidden at load, the onclick doesnt work properly. </p>
  
  <pre><code>
  &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;div style="margin-top:30px;"&gt;
          &lt;h2&gt;Menu&lt;/h2&gt;
          &lt;p&gt;Dayton, Ohio Menu Coming Soon. It can be viewed currently at &lt;a href="https://www.leafly.com/dispensary-info/pure-ohio-wellness" target="_blank" style="color:green"&gt;here&lt;/a&gt;&lt;/p&gt;
              &lt;p&gt;&lt;a onClick="myFunction()"&gt;Springfield, Ohio Menu&lt;/a&gt;&lt;/p&gt;
              &lt;div&gt;
              &lt;div id="myDIV" style="display: none"&gt;
          &lt;div id="leafly-menu"&gt;
              &lt;/div&gt;
              &lt;div style="text-align:center;"&gt;
              &lt;/div&gt;
              &lt;script src="https://www.leafly.com/public/global/js/dispensarymanager/embed.js"&gt;&lt;/script&gt;
  &lt;script&gt;var pymParent = pym.Parent('leafly-menu', 'https://www.leafly.com/embed/menu2/pure-ohio-wellness---springfield', {});&lt;/script&gt;
          &lt;/div&gt;
          &lt;div style="overflow: hidden; margin: 15px auto; max-width: 975px;display: none;"&gt;
  &lt;iframe scrolling="no" src="https://www.leafly.com/dispensary-info/pure-ohio-wellness---springfield" style="border: 0px none; margin-left: -36px; height: 1012px; margin-top: -486px; width: 1050px;"&gt;
  &lt;/iframe&gt;
  &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>