[HTML & CSS & Javascript] hide the iframe at website load and show the iframe when button clicked

[WillLTT]

hey @WWicketi need help again with your code.

instead of necroposting im starting a new one.

 

this time i need help making your code in this forum posts ive come to the realizeation that i dont want the iframe to show at page load.

 

sumamary: i want to to hide atload and show it with the button

basically reverse what you did last time @WWicket

 

thanks for your time

(also anyone that has a clue what im  talking about are very very apprichiated to help me!  )

[WWicket]

Just add 

  #iframe {
    display: none;
  }

to the style sheet.

[WillLTT]

19 hours ago, WWicket said:

Just add 

  #iframe {
    display: none;
  }

to the style sheet.

new problem: it works, but the javascript hides the button it first, at first click. but its already hidden and due to that does need 3 clicks to show!

thanks for sticking around @WWicket 

[WWicket]

11 hours ago, ughiwanthackintosh said:

new problem: it works, but the javascript hides the button it first, at first click. but its already hidden and due to that does need 3 clicks to show!

thanks for sticking around @WWicket 

This is kind of messy and I'm not sure why it would be necessary-- probably some issue with loading orders-- but this seems to fix it:

 

remove from css:

#iframe {display:none;}

add to html in head: 

<script> document.addEventListener('DOMContentLoaded', (event) => {
      iframeHide();
  });</script>

add to js: 

function iframeHide() {
  var iframe = document.getElementById("iframe");
  iframe.style.display = "none";
}