We Keep Coding

div with iframe in it, display none

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.
<script>
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
<div style="margin-top:30px;">
<h2>Menu</h2>
<p>Dayton, Ohio Menu Coming Soon. It can be viewed currently at here</p>
<p><a onClick="myFunction()">Springfield, Ohio Menu</a></p>
<div>
<div id="myDIV" style="display: none">
<div id="leafly-menu">
</div>
<div style="text-align:center;">
</div>
<script src="https://www.leafly.com/public/global/js/dispensarymanager/embed.js"></script>
<script>var pymParent = pym.Parent('leafly-menu', 'https://www.leafly.com/embed/menu2/pure-ohio-wellness---springfield', {});</script>
</div>
<div style="overflow: hidden; margin: 15px auto; max-width: 975px;display: none;">
<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;">
</iframe>
</div>
</div>
</div>

I think the functionality you're looking for here can be solved with the visibility:hidden tag, as I've had similar experienced with the "display:none" css property.
Definitely worth another google for differences between the two, but the w3schools snippet here seems to summarize things pretty well.
Hope this helps!

You can easily display the elements inside the Div using the click() function of jQuery. You need to include the jQuery CDN or jQuery file to run the jQuery scripts.
$(document).ready(function() {
$("#showMe").click(function () {
$("#myDIV").show();
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div style="margin-top:30px;">
<h2>Menu</h2>
<p>Dayton, Ohio Menu Coming Soon. It can be viewed currently at here</p>
<p><a id = "showMe" href="#">Springfield, Ohio Menu</a></p>
<div id="myDIV" style="display: none">
<div >
<div id="leafly-menu">
</div>
<div style="text-align:center;">
</div>
<script src="https://www.leafly.com/public/global/js/dispensarymanager/embed.js"></script>
<script>var pymParent = pym.Parent('leafly-menu', 'https://www.leafly.com/embed/menu2/pure-ohio-wellness---springfield', {});</script>
</div>
<div style="overflow: hidden; margin: 15px auto; max-width: 975px;">
<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;">
</iframe>
</div>
</div>
</div>
I have updated the Fiddle with the two menus.
https://jsfiddle.net/9b15gw0f/

Div displays on click but for only a second

I am using onclick method on a link in order to display a div. However, the div disappears after displaying for a second.
function view() {
document.getElementById('topmenu').setAttribute('style', 'display:block');
}
#topbar {
background-color: yellow;
overflow: auto;
}
#topmenu {
display: none;
}
<header>
<div id="topbar">
<img src="/images/santorini-wedding-photographer-logo.png" style="float: left;">
<span style="float: right;">MENU</span>
</div>
<div id="topmenu">
some text here
</div>
</header>

Your anchor tag has a href attribute, which is following the link and changing the page contents. Remove the HREF ( which is actually a bad idea ), or better yet; use a span or something instead.
FYI: There are also multiple other solutions available to keep the href, but prevent the page from changing location.
function view() {
document.getElementById('topmenu').setAttribute('style', 'display:block');
}
#topbar {
background-color: yellow;
overflow: auto;
}
#topmenu {
display:none;
}
<header>
<div id="topbar">
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/santorini-wedding-photographer-logo.png" style="float: left;">
<span style="float: right;"><a onclick="view()">MENU</a></span>
</div>
<div id="topmenu">
some text here
</div>
</header>

In your anchor tag, set your href to href="#!" so that the event doesn't propagate. And your code for the div to show works as expected.
It would also work with href="#", but this would take you back to the top of the page in case you're somewhere at the bottom.

How to automatically scroll when span expands inside a container?

I am new to programming so I apologise if my code presentation is not very good or my explanation not very clear. But, what I am trying to achieve is an auto-scroll feature as the content inside the <span> tag expands, so as you can see the function will print <br> and eventually, my <span> will require scrolling, when that happens, I would like to make it scroll automatically to the bottom of the <span> until the function finishes.
<pre><span class="inner-pre" id=code style="height:500px; display: block; overflow: auto; font-size: 16px"></span></pre>
<script>
function print()
{
for (i = 0; i < n; i++)
{
document.getElementById("code").innerHTML += "<br>";
} // for
} // end-function
</script>
I have looked at similar Stack Overflow questions, and I cannot find a solution to what I am trying to achieve. I have tried the following solutions:
document.getElementById('divID').scrollIntoView();
$(divname / .class / #id).focus();
div = document.getElementById('#your_div');
div.scrollTo(0,div.scrollHeight);
But neither worked for me, though, it may be that I might've implemented it wrong.
My HTML code:
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="panel panel-danger">
<div class="panel-heading"><h3 align="center">Pseudo Code</h3></div>
<div class="panel-body" style="height:600px;">
<pre><span class="inner-pre" id=code style="height:500px; display: block; overflow: auto; font-size: 16px">code</span></pre>
</div>
</div>
</div>
</div>
</div>

Select everything except iframe by using $(this) and .not

I have wrote this code and it is working properly:
HTML:
<div class="service-box">
<!--Services Title 1-->
<h3>WordPress installation</h3>
<!--Content for title 1-->
<div class="service-content">
<!--Your youtube service video iframe code-->
<iframe width="420" height="315" src="https://www.youtube.com/embed/R7hHfoffIM4?rel=0" frameborder="0" allowfullscreen></iframe>
<!--Your service description-->
<p>I am offering services like:</p>
<p>WordPress installation to your already purchased domain and hosting.</p>
<p>Also I am able to create subdomain and install wordpress on it.</p>
<p>If You need me to make a WP backup, I can do that for You.</p>
<p>In case that You need me to restore your website from my previously made backup I am here for You.</p>
</div>
JS:
$(document).on('click', '.service-box', function(){
$('#siteOverlay').addClass('overlay-active');
$('#popupWindow').addClass('service-active');
$('#popupWindow #contentBox').html($(this).html()); //I will change this line
$('body').css('overflow', 'hidden');
});
Then I try to select everything except IFRAME tag like this:
$('#popupWindow #contentBox').html($(this).not($('iframe')).html());
or like this:
$('#popupWindow #contentBox').html($(this).not('iframe').html());
and it doesn't work.
I have also tried to use:not selector in all combinations like this:
$('#popupWindow #contentBox').html($(this:not).html());
Nothing is working. Is there anyone who knows the answer to this?
Thanks!

You want to remove the iframe from the html of the clicked element, not from the clicked element itself. so.... you'll have to clone it and remove it from the clone, then append it.
var clone = $(this).clone();
clone.find('iframe').remove();
$('#popupWindow #contentBox').html(clone.contents());

Is this what you want?
var clone = $(this).clone();
clone.find('iframe').remove();
$('#contentBox').empty().append(clone);
$(document).on('click', '.service-box', function() {
$('#siteOverlay').addClass('overlay-active');
$('#popupWindow').addClass('service-active');
var clone = $(this).clone();
clone.find('iframe').remove();
$('#contentBox').empty().append(clone);
$('body').css('overflow', 'hidden');
});
#siteOverlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0,0,0,0.5);
}
#siteOverlay.overlay-active {
display: block;
}
#popupWindow {
position: absolute;
top: 50px;
left: 50px;
right: 50px;
bottom: 50px;
background-color: white;
padding: 50px;
overflow-y: scroll;
}
#contentBox {
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="service-box">
<!--Services Title 1-->
<h3>WordPress installation</h3>
<!--Content for title 1-->
<div class="service-content">
<!--Your youtube service video iframe code-->
<iframe width="420" height="315" src="https://www.youtube.com/embed/R7hHfoffIM4?rel=0" frameborder="0" allowfullscreen></iframe>
<!--Your service description-->
<p>I am offering services like:</p>
<p>WordPress installation to your already purchased domain and hosting.</p>
<p>Also I am able to create subdomain and install wordpress on it.</p>
<p>If You need me to make a WP backup, I can do that for You.</p>
<p>In case that You need me to restore your website from my previously made backup I am here for You.</p>
</div>
</div>
<div id="siteOverlay">
<div id="popupWindow">
<div id="contentBox"></div>
</div>
</div>

Weird bug on my javascript showhide code

I got this show all thing succesfully done, but now when I click Show all and then click the text or image that opens, it puts the text below to right side of the screen.
JSFiddle
Gyazo
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>
$(function () {
$('.toggle-all').click(function() {
$('.printer').each(function () {
$(this).siblings('.gwinfo').slideToggle('slow');
});
});
});
</script>
<style>
.gwinfo {
display: none;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
.left{
display: block;
float:left;
width:10%;
}
</style>
General: Rest of code in JSFiddle, feel free to fix some of my code, I would appreciate that a lot. Also if you manage to fix my code, please post a JSFiddle link with fixed code. Thank you a ton, guys!

Instead of using the break tag to clear your floats, use a div. I also fixed some tags that were not properly nested.
<div style="clear: both;"></div>
http://jsfiddle.net/z2tSd/5/

Guess the tags are mis-matched.. Can you change your HTML to the one as below:
<div class="gwshowhide">
<li><a class="printer">Money Printer</a>
<div class="gwinfo">Level Requirement: 1
<br>Price: $1000
<br>Production:
<br>
<img src="images/shop/Amber Money Printer.png">
</div>
</li>
</div>
The existing one's are like where <li> tags are mismatching:
<div class="left">
<div class="gwshowhide">
<li><a class="printer">Money Silo</a>
<div class="gwinfo">Level Requirement: 85
<br>Price: $10,000
<br>Production:
<br>
<img src="images/shop/Diamond Money Silo.png">
</div>
</div>
</li>
</div>
Not sure if this will fix your issue though.. but you can give a try..
Also make sure you are suppressing the bullet list items using the style below:
.gwshowhide {
list-style:none;
}